添加任务
This commit is contained in:
lq
@ -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>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user