From 0671c19306938b4808092fbf7b8b792647384df2 Mon Sep 17 00:00:00 2001
From: lq <121091329@qq.com>
Date: Thu, 18 Sep 2025 14:40:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BB=BB=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/media-account/icon-AI.png      | Bin 0 -> 1520 bytes
 .../components/draw-popup.vue                 | 335 +++++++++++++++++-
 .../components/filter-popup.vue               |  10 +-
 .../components/task-item.vue                  |   4 +
 4 files changed, 340 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/img/media-account/icon-AI.png
 create mode 100644 src/views/property-marketing/assignment-management/components/task-item.vue

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 0000000000000000000000000000000000000000..795b3bbf86ea90d508950f5fffc104174429de62
GIT binary patch
literal 1520
zcmV<M1rPd(P)<h;3K|Lk000e1NJLTq001EX001Be1^@s6oVXFn00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1%*jOK~#7F?N`lf
zTvZf5=e;){nWXKcP4iI^$5y0J#a5`LxaeddE<|WIVpnZIFkRJvh;@^6C9cH3pv^*X
zX95;c!F1&ZNRui>iJ)l+Xqu{7n9RqU_m01F?|t(oNoSJQO&7gz=FYr#-~Ij0?|i&F
zL=VAW`k!NVLW-D*lp{KJi5KVr#(k5RIStSZo#O(P{VqD?by07on<Tf3DBDe(>!G=9
zp5`(+njSdAQ#;vn$0R;2OR<opi=3yo{2c88ID>?E1>&GUl-q4cP!5*Yxy#r>zKbqr
zU*xNu_6~MJ;PbMSVu%nCl|0$t0aHv8<EEMjF-+&=ehGF(zLQfVbeT`yJ6s-ZGp?28
zDE7Z0K9xX%)BvKu5=SrqMgR{R#0}g`EK*`Aq4QugBi~BtzDcM8@Z@U{=*3DAtkyjn
za573PhJlO$Z=@Egh1OzAq-2Q9nnd0?2|PO!GZh6)Vh>X5jLSZ9AiEdV3oF`CL=BR9
zXu<0aJXFF6c$g|uq8fd;8HYQlFdi{YKn0~Lu@4gXu4<fkk7(#bx^{k=Xz6<-7?LsH
zgM=(tE4_^0{UCA|_A>})tk>W<oH@zYJ1Sukk!f53*%448x;ogkk${fABT&NSf~o*B
zs<<$yinLyXRf(#h3D-Dn7Y;mB76pdqj(`mZ=DugQuHX9<Hp;q?)B#i{uGVar%zhwK
zQ4+YfRyRb-D_=>uBME?=GfAl6Y-eYZs1U9b-Tb(X8kR_^MC6o!RqB>ZEuzz%NidXP
zGZWc75I6JwBX-RSVm$vPiIUOL{|pGku1sBWCQ3w-f~ykixL0Y=b8Sgndr6KaUYk5%
zQ<|nS`T$heZ`Uo|u%TL-bxIsU{$yQ=S|XAtp*>^Wk*I`Di3TdA9SLk)B<Hz;BuS~n
zhK{G}?#x@Imgnv73@W2%$N-8G(B_qNP9@Vy04m5@n3CAiwi_rhiET1UQow9X9y@MJ
z`pz#z|NgBF1B(2VK05%VmKRY_0QEse+qemDY;z=3fw4F4vDf1M782Ef7JLUvE)2}X
zg?(u#`VSMm`T=d}G6$j551)a6m?Ui~p_4W-Emi%YBthaIY8Q^PpYTGMmDPGyILrt|
z8Qb*^ys&XycOPt@wPa+wY;KrN>A-bpeuns{gIE~ZZd$9;&9+MDs0TEM4ay$WfVQlH
z9C+UPy@oLS_Kj7+gbQwTqlF)GBnQzm{#djX5mU-SNqCW2E~*3`o$E-V=E;<jP;?)$
z*xe^Q@U+!_5&VDr!nz3(wwwA^kwK_1a1ht8<2s&=Tb00@7jL{~K46}tcHz)b3BAdx
z$SRC#EVSqG^xonvY#LaTz!K2P`SW*sf9Od=h+B6SOG5id5|+8w#<;0O+ZWjTZ-f(`
z$KwGu>*-;7;;<(k2rb<*d1^7lby5()5l=%QP=^<O#f)n`y~KkhqQ6#%?k-!8eN}<!
z%*fm6(XTCuiStrqFPhB+QpyBOxxkaa7Y?vPz~(igPqTWN5HWMGq0JjJC}OHimrstq
z!y~O&ZO;=ES9!G>H$JLGPD+FZ;nb2x9*AjT!tS8sw}85YHQ>H05NXEcc5a=<He<Ct
zV~)OFDOKuxk#eF*WKL5a+Yc0smJG7YbQ5vS%)DC?Qc57fRt50mHar*}nc&sUSZ$T4
zR`?2%sFakNIa{)IDp4Y~fNWm#E)0}}z<SOu;M4gE9lOxxf5|<SIQvRfk6>kL?&UnS
zv)Q^SxpO6EQz@o2-C7lG4zKaC(M#zmYR4q-|DvqP7{EMV&780jFF9#au3?#qpfm{=
zkgZdYe)`RAz&n!ICAnept3?X(s6DjftW|;0ZUf&wm1&Wwnzdgqy!&8(10RitYWxTI
WKcuPE<`qu>0000<MNUMnLSTY~_P#Ix

literal 0
HcmV?d00001

diff --git a/src/views/property-marketing/assignment-management/components/draw-popup.vue b/src/views/property-marketing/assignment-management/components/draw-popup.vue
index 1585103..cddf15f 100644
--- a/src/views/property-marketing/assignment-management/components/draw-popup.vue
+++ b/src/views/property-marketing/assignment-management/components/draw-popup.vue
@@ -7,16 +7,175 @@
     v-model:visible="showDriwer"
     @after-visible-change="showDriwerChange"
     width="480px"
-    class="rounded-left"
+    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 items-start">
+        <CommonSelect
+          v-model="localQuery.accounts"
+          :options="accountList || []"
+          :multiple="true"
+          @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"
+                />
+              </div>
+            </div>
+            <!-- 素材添加区域 -->
+            <div class="form-section material-section">
+              <Button class="add-material-btn" @click="handleAddMaterial">
+                <template #icon>
+                  <icon-plus size="16" class="mr-8px" />
+                </template>
+                从原料库添加
+              </Button>
+              <p class="material-hint">AI会参考添加的文本、图片、视频等素材，完成符合需求的创作</p>
+            </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">
+                <Button @click="handleAddMaterial" class="add-material-btn">
+                  <template #icon>
+                    <icon-plus size="16" class="mr-8px" />
+                  </template>
+                  添加内容
+                </Button>
+
+                <p class="material-hint">前往成品库，选择要发布的内容</p>
+              </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="localQuery.accounts"
+            :options="accountList || []"
+            :multiple="true"
+            @change="(val) => handleChange('accounts', val)"
+            class="w-180px background-#fff"
+            placeholder="请选择账号名称"
+            :allowSearch="true"
+            :maxTagCount="999"
+            popup-container=".filter-popup-content"
+          />
+        </div>
+
+        <div v-if="isTiming">
+          <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:value="strValue" format="HH:mm" class="w-180px h-40px background-#fff" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <a-drawer
+      title="成品库"
+      cancel-text="取消"
+      ok-text="确定"
+      placement="right"
+      v-model:visible="showDrawer2"
+      @after-visible-change="showDriwerChange"
+      width="904px"
+      class="task-drawer"
+      style="right: 481px"
+    >
+    </a-drawer>
   </a-drawer>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import aiIcon from '@/assets/img/media-account/icon-AI.png';
+import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
+import dayjs from 'dayjs';
 
+const selectedTab = ref('ai-generate');
+// 定义props和emit
+const props = defineProps({
+  operators: Array,
+  platformOptions: Array,
+  accountList: Array,
+  query: Object,
+});
+const isActive = ref('ai');
+// 本地筛选状态（保持上次选择）
+const localQuery = ref({
+  accounts: props.query?.ids || [],
+});
 const showDriwer = ref(false);
-
+const showDrawer2 = ref(false);
+const emit = defineEmits(['filter-change']);
+const isTiming = ref(true);
+const currentDate = ref(new Date());
+const strValue = ref('12:08');
+const handleSelect = (value) => {
+  console.log('++++++++++', value);
+  isActive.value = value;
+};
+const handleAddMaterial = () => {
+  showDrawer2.value = true;
+};
+const handleDateChange = (date) => {};
 // 暴露方法给父组件
 const showDrawer = () => {
   showDriwer.value = true;
@@ -26,8 +185,176 @@ const showDriwerChange = (visible: boolean) => {
   console.log('Drawer visible: ', visible);
 };
 
+// 处理筛选条件变化（不关闭弹窗，直接触发筛选）
+const handleChange = (field, value) => {
+  localQuery.value[field] = value;
+  // 直接触发筛选变更，不需要确认按钮
+  emit('filter-change', {
+    accounts: localQuery.value.accounts,
+  });
+};
+
 // 使用defineExpose暴露方法
 defineExpose({
-  showDrawer
+  showDrawer,
 });
-</script>
\ No newline at end of file
+</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;
+}
+
+.main-container {
+  width: 100%;
+  max-width: 600px;
+  background-color: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.tab-group {
+  margin-bottom: 24px;
+  width: 100%;
+}
+
+.tab-button {
+  flex: 1;
+  height: 48px;
+  font-size: 16px;
+}
+
+.ai-tab .ai-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: #722ed1;
+  color: white;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 16px;
+  font-size: 12px;
+  margin-right: 8px;
+}
+
+.form-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 400px;
+  border-radius: 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;
+}
+
+.drag-handle {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background-color: #ff7d00;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.material-hint {
+  color: #939499;
+  font-size: 14px;
+  margin: 0 40px;
+}
+
+.size-selector {
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.size-tag {
+  font-size: 14px;
+  padding: 6px 16px;
+  border-radius: 16px;
+}
+
+.publish-select {
+  width: 100%;
+  height: 40px;
+}
+.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
index 60164f8..9398eac 100644
--- a/src/views/property-marketing/assignment-management/components/filter-popup.vue
+++ b/src/views/property-marketing/assignment-management/components/filter-popup.vue
@@ -11,7 +11,7 @@
       <template #content>
         <div class="filter-popup-content">
           <!-- 运营人员 -->
-          <div class="flex items-start mb-3 select-container">
+          <div class="flex items-center mb-3 select-container">
             <div class="w-70px pt-6px">运营人员</div>
             <a-space class="flex-1">
               <CommonSelect
@@ -27,7 +27,7 @@
             </a-space>
           </div>
           <!-- 发布平台 -->
-          <div class="flex items-start mb-3 select-container">
+          <div class="flex items-center mb-3 select-container">
             <div class="w-70px pt-6px">发布平台</div>
             <a-space class="flex-1">
               <CommonSelect
@@ -43,7 +43,7 @@
             </a-space>
           </div>
           <!-- 账号名称 -->
-          <div class="flex items-start mb-3 select-container">
+          <div class="flex items-center mb-3 select-container">
             <div class="w-70px pt-6px">账号名称</div>
             <a-space class="flex-1">
               <CommonSelect
@@ -122,7 +122,7 @@ const handleChange = (field, value) => {
     platform: localQuery.value.platform,
     accounts: localQuery.value.accounts,
   });
-  
+
   // 选择后自动隐藏下拉菜单
   setTimeout(() => {
     visible.value = false;
@@ -178,4 +178,4 @@ const handleClickOutside = () => {
 .select-with-tags :deep(.ant-select-selection-overflow) {
   flex-wrap: wrap !important;
 }
-</style>
\ No newline at end of file
+</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..60cf331
--- /dev/null
+++ b/src/views/property-marketing/assignment-management/components/task-item.vue
@@ -0,0 +1,4 @@
+<template>
+    <div class="task-item"> 
+    </div>
+</template>
\ No newline at end of file