原料库成品库
This commit is contained in:
lq
@ -56,12 +56,13 @@
|
||||
placeholder="描述你想让AI帮你生成的内容。未填写时，AI 会参考账号历史内容的题材与行业方向，结合当下话题，自动生成文案和图片后发布"
|
||||
class="task-description font-size-12px"
|
||||
:rows="5"
|
||||
v-model="taskDescription"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 素材添加区域 -->
|
||||
<div class="form-section material-section">
|
||||
<div v-if="hasChose" class="flex items-center"></div>
|
||||
<div v-if="hasChoseMaterial" class="flex items-center"></div>
|
||||
<div v-else class="flex flex-col items-center">
|
||||
<Button class="add-material-btn" @click="handleAddMaterial">
|
||||
<template #icon>
|
||||
@ -129,343 +130,55 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="isActive == 'ai'">
|
||||
<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"
|
||||
>
|
||||
<Table
|
||||
:data-source="materialData"
|
||||
bordered
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
row-key="id"
|
||||
:row-selection="rowSelection"
|
||||
>
|
||||
<template #name="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img :src="record.cover" class="w-64px h-64px border-rounded-8px bg-#F0EDFF" />
|
||||
<div class="flex flex-col ml-8px">
|
||||
<div>{{ record.name }}</div>
|
||||
<div class="text-#999 text-12px">序号：{{ record.uid }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #type="{ record }">
|
||||
<div class="flex items-center">
|
||||
{{ getType(record.type) }}
|
||||
</div>
|
||||
</template>
|
||||
<template #from="{ record }">
|
||||
<div class="flex items-center">
|
||||
{{ getFrom(record.type) }}
|
||||
</div>
|
||||
</template>
|
||||
<template #create_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 v-if="pageInfo.total > 0" 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" alt="" class="w-44px h-44px border-rounded-8px bg-#F0EDFF" />
|
||||
</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>
|
||||
</div>
|
||||
<div v-show="isActive == 'chose'">
|
||||
<a-drawer
|
||||
title="成品库"
|
||||
cancel-text="取消"
|
||||
ok-text="确定"
|
||||
placement="right"
|
||||
v-model:visible="showDrawer3"
|
||||
@after-visible-change="showDriwerChange"
|
||||
width="904px"
|
||||
class="task-drawer"
|
||||
style="right: 481px"
|
||||
>
|
||||
<Table
|
||||
:data-source="materialData"
|
||||
bordered
|
||||
:columns="columns2"
|
||||
: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">
|
||||
<div>{{ record.title }}</div>
|
||||
</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">
|
||||
{{ getStatus(record.audit_status) }}
|
||||
</div>
|
||||
</template>
|
||||
<template #last_modified_at="{ record }">
|
||||
<div class="flex items-center">
|
||||
{{ record.created_at ? dayjs(record.last_modified_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
<div v-if="pageInfo.total > 0" 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" class="w-44px h-44px border-rounded-8px bg-#F0EDFF" />
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<!-- 原料库子组件：使用:visible和@update:visible替代v-model -->
|
||||
<RawMaterialDrawer
|
||||
:visible="showDrawer2"
|
||||
@update:visible="val => showDrawer2 = val"
|
||||
: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, getWriterLinksGenerate } from '@/api/all/generationWorkshop.ts';
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
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 { Checkbox, Button, Space, Pagination, notification, DatePicker, TimePicker, Table } from 'ant-design-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';
|
||||
|
||||
// 状态管理
|
||||
const choseText = ref('');
|
||||
const columns = ref([
|
||||
{
|
||||
title: '文件名称',
|
||||
dataIndex: 'name',
|
||||
width: 200,
|
||||
slots: { customRender: 'name' },
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
width: 100,
|
||||
slots: { customRender: 'type' },
|
||||
},
|
||||
{
|
||||
title: '来源',
|
||||
dataIndex: 'from',
|
||||
width: 100,
|
||||
slots: { customRender: 'from' },
|
||||
},
|
||||
{
|
||||
title: '上传时间',
|
||||
dataIndex: 'created_at',
|
||||
width: 200,
|
||||
slots: { customRender: 'create_at' },
|
||||
},
|
||||
]);
|
||||
|
||||
const columns2 = 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' },
|
||||
},
|
||||
]);
|
||||
const handleAddMaterial = () => {
|
||||
handleSearch();
|
||||
showDrawer2.value = true;
|
||||
};
|
||||
const handleAddContent = () => {
|
||||
handleSearchWork();
|
||||
showDrawer3.value = true;
|
||||
};
|
||||
const handleSelect = (value) => {
|
||||
isActive.value = value;
|
||||
if (value == 'ai') {
|
||||
showDrawer3.value = false;
|
||||
} else {
|
||||
showDrawer2.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const choseImgArray = ref([]);
|
||||
// 表格分页逻辑
|
||||
const { pageInfo, onPageChange, onPageSizeChange, rowSelection, selectedRowKeys } = useTableSelectionWithPagination({
|
||||
rowKey: 'id',
|
||||
onPageChange: () => handleSearch(),
|
||||
onPageSizeChange: () => handleSearch(),
|
||||
});
|
||||
|
||||
// 监听选中项变化
|
||||
watch(selectedRowKeys, (newVal) => {
|
||||
console.log(newVal);
|
||||
query.ids = newVal;
|
||||
const filteredData = materialData.value.filter((item) => newVal.includes(item.id));
|
||||
choseImgArray.value = materialData.value.filter(
|
||||
(item) => newVal.includes(item.id) && (item.type == 0 || item.type == 1),
|
||||
);
|
||||
console.log('+++++', choseImgArray.value);
|
||||
choseText.value = '';
|
||||
const typeCount = filteredData.reduce((acc, item) => {
|
||||
acc[item.type] = (acc[item.type] || 0) + 1;
|
||||
return acc;
|
||||
}, {});
|
||||
console.log('+++++', typeCount);
|
||||
Object.entries(typeCount).forEach(([type, count]) => {
|
||||
console.log('++++tyype', type, getType(type));
|
||||
console.log(`${getType(type)}: ${count}个`);
|
||||
choseText.value += `${getType(type)}: ${count}个 `;
|
||||
});
|
||||
});
|
||||
|
||||
// 定义props和emit
|
||||
const props = defineProps({
|
||||
operators: Array,
|
||||
platformOptions: Array,
|
||||
accountList: Array,
|
||||
query: Object,
|
||||
});
|
||||
// 查询参数
|
||||
const query = reactive({
|
||||
page: pageInfo.value.page,
|
||||
page_size: pageInfo.value.page_size,
|
||||
platforms: undefined,
|
||||
operator_ids: undefined,
|
||||
ids: [],
|
||||
top_execution_time: undefined,
|
||||
});
|
||||
const materialData = ref([]);
|
||||
const handleSearch = async () => {
|
||||
const res = await getRawMaterialsPage(query);
|
||||
pageInfo.value.total = res.data.total;
|
||||
if (pageInfo.value.page == 1) {
|
||||
materialData.value = [];
|
||||
}
|
||||
materialData.value = [...materialData.value, ...res.data.data];
|
||||
};
|
||||
|
||||
const handleSearchWork = async () => {
|
||||
const res = await getWorksPage(query);
|
||||
pageInfo.value.total = res.data.total;
|
||||
if (pageInfo.value.page == 1) {
|
||||
materialData.value = [];
|
||||
}
|
||||
materialData.value = [...materialData.value, ...res.data.data];
|
||||
};
|
||||
|
||||
const taskDescription = ref('');
|
||||
const hasChoseMaterial = ref(false);
|
||||
const isActive = ref('ai');
|
||||
const showDriwer = ref(false);
|
||||
const showDrawer2 = ref(false);
|
||||
const showDrawer3 = ref(false);
|
||||
|
||||
// 发布类型选项
|
||||
const publishOptions = ref([
|
||||
{ value: 'immediate', label: '立即发布' },
|
||||
@ -475,109 +188,166 @@ const publishOptions = ref([
|
||||
// 发布类型，默认为立即发布
|
||||
const publishType = ref('immediate');
|
||||
|
||||
const getStatus = (status) => {
|
||||
// 处理字符串和数字类型的type值
|
||||
switch (status) {
|
||||
case 0:
|
||||
return '全部';
|
||||
case RawMaterialType.Video:
|
||||
case '1':
|
||||
case 1:
|
||||
return '待审核';
|
||||
case RawMaterialType.Text:
|
||||
case '2':
|
||||
case 2:
|
||||
return '审核中';
|
||||
case RawMaterialType.Text:
|
||||
case '3':
|
||||
case 3:
|
||||
return '已通过';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
const getType = (type) => {
|
||||
// 处理字符串和数字类型的type值
|
||||
switch (type) {
|
||||
case RawMaterialType.Image:
|
||||
case '0':
|
||||
case 0:
|
||||
return '图片';
|
||||
case RawMaterialType.Video:
|
||||
case '1':
|
||||
case 1:
|
||||
return '视频';
|
||||
case RawMaterialType.Text:
|
||||
case '2':
|
||||
case 2:
|
||||
return '文本';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
// 时间选择相关
|
||||
const currentDate = ref(new Date());
|
||||
const strValue = ref(dayjs().format('HH:mm'));
|
||||
|
||||
const getFrom = (type) => {
|
||||
switch (type) {
|
||||
case 0:
|
||||
return '本地上传';
|
||||
case 1:
|
||||
return 'AI生成';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
// 处理发布类型变化
|
||||
const handlePublishTypeChange = (value) => {
|
||||
publishType.value = value;
|
||||
};
|
||||
// 定义props和emit
|
||||
const props = defineProps({
|
||||
operators: Array,
|
||||
platformOptions: Array,
|
||||
accountList: Array,
|
||||
query: Object,
|
||||
});
|
||||
|
||||
// 本地筛选状态（保持上次选择）
|
||||
const localQuery = ref({
|
||||
accounts: props.query?.ids || [],
|
||||
});
|
||||
const showDriwer = ref(false);
|
||||
const showDrawer2 = ref(false);
|
||||
const showDrawer3 = ref(false);
|
||||
const emit = defineEmits(['filter-change']);
|
||||
const isTiming = ref(true);
|
||||
const currentDate = ref(new Date());
|
||||
// 将时间选择器默认值设置为当前时间
|
||||
const strValue = ref(dayjs().format('HH:mm'));
|
||||
|
||||
// 监听抽屉显示状态，每次打开时更新时间为当前时间
|
||||
// 原料库查询参数
|
||||
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: []
|
||||
});
|
||||
|
||||
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 handleMaterialConfirm = (result) => {
|
||||
selectedMaterials.value = {
|
||||
keys: result.selectedKeys,
|
||||
data: result.selectedData,
|
||||
text: result.choseText,
|
||||
images: result.choseImgArray
|
||||
};
|
||||
hasChoseMaterial.value = result.selectedKeys.length > 0;
|
||||
};
|
||||
|
||||
// 处理原料库取消
|
||||
const handleMaterialCancel = () => {
|
||||
// 取消逻辑
|
||||
};
|
||||
|
||||
// 处理成品库选择确认
|
||||
const handleProductConfirm = (result) => {
|
||||
selectedProducts.value = {
|
||||
keys: result.selectedKeys,
|
||||
data: result.selectedData,
|
||||
text: result.choseText,
|
||||
images: result.choseImgArray
|
||||
};
|
||||
};
|
||||
|
||||
// 处理成品库取消
|
||||
const handleProductCancel = () => {
|
||||
// 取消逻辑
|
||||
};
|
||||
|
||||
// 处理发布类型变化
|
||||
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;
|
||||
emit('filter-change', {
|
||||
accounts: localQuery.value.accounts,
|
||||
});
|
||||
};
|
||||
|
||||
// 监听主抽屉显示状态，每次打开时更新时间为当前时间
|
||||
watch(showDriwer, (newVal) => {
|
||||
if (newVal) {
|
||||
strValue.value = dayjs().format('HH:mm');
|
||||
}
|
||||
});
|
||||
|
||||
const handleDateChange = (date) => {};
|
||||
// 暴露方法给父组件
|
||||
const showDrawer = (accountInfo = null) => {
|
||||
showDriwer.value = true;
|
||||
// 如果传入了账号信息，则设置为默认选中
|
||||
if (accountInfo && accountInfo.id) {
|
||||
// 使用 nextTick 确保在 DOM 更新后设置默认值
|
||||
nextTick(() => {
|
||||
localQuery.value.accounts = [accountInfo.name];
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showDriwerChange = (visible: boolean) => {
|
||||
console.log('Drawer visible: ', visible);
|
||||
};
|
||||
// 定义事件发射器
|
||||
const emit = defineEmits(['filter-change', 'create-task']);
|
||||
|
||||
// 处理筛选条件变化（不关闭弹窗，直接触发筛选）
|
||||
const handleChange = (field, value) => {
|
||||
localQuery.value[field] = value;
|
||||
// 直接触发筛选变更，不需要确认按钮
|
||||
emit('filter-change', {
|
||||
accounts: localQuery.value.accounts,
|
||||
});
|
||||
};
|
||||
|
||||
// 使用defineExpose暴露方法
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
showDrawer,
|
||||
});
|
||||
@ -591,7 +361,6 @@ defineExpose({
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 抽屉左侧圆角样式 */
|
||||
.arco-drawer {
|
||||
border-top-left-radius: 8px !important;
|
||||
border-bottom-left-radius: 8px !important;
|
||||
@ -611,40 +380,6 @@ defineExpose({
|
||||
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;
|
||||
@ -678,7 +413,7 @@ defineExpose({
|
||||
height: 126px;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important; /* 去除默认的聚焦轮廓 */
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.task-description::placeholder {
|
||||
@ -702,34 +437,12 @@ defineExpose({
|
||||
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-type-select :deep(.ant-select-selection-item) {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
@ -737,22 +450,10 @@ defineExpose({
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.publish-select {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.line {
|
||||
background-color: #e6e6e8;
|
||||
width: 382px;
|
||||
height: 1px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
/* 分页样式 */
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user