修改页面
This commit is contained in:
lq
@ -11,6 +11,7 @@
|
||||
"prepare": "husky install"
|
||||
},
|
||||
"dependencies": {
|
||||
"@arco-design/web-vue": "^2.42.0",
|
||||
"@microsoft/fetch-event-source": "^2.0.1",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@vueuse/core": "^9.12.0",
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
:allowClear="allClear"
|
||||
:showSearch="allowSearch"
|
||||
showArrow
|
||||
:maxTagCount="maxTagCount"
|
||||
:maxTagCount="maxTagCount !== undefined ? maxTagCount : (multiple ? 3 : undefined)"
|
||||
@change="handleChange"
|
||||
:filterOption="allowSearch ? filterOption : undefined"
|
||||
>
|
||||
@ -59,7 +59,7 @@ const props = defineProps({
|
||||
},
|
||||
maxTagCount: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
default: undefined,
|
||||
},
|
||||
allClear: {
|
||||
type: Boolean,
|
||||
|
||||
@ -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>
|
||||
@ -18,17 +18,18 @@
|
||||
<div>发布失败</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-button size="small" class="mr-3 color-scheme-btn">
|
||||
<Button class="w-112px mr-8px" size="middle">
|
||||
<template #icon>
|
||||
<InfoCircleOutlined class="color-#55585F" />
|
||||
</template>
|
||||
<template #default>颜色示意</template>
|
||||
</a-button>
|
||||
</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>
|
||||
|
||||
@ -0,0 +1,259 @@
|
||||
<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"
|
||||
/>
|
||||
<!-- 周选择器 -->
|
||||
<a-week-picker
|
||||
class="w-188px size-14px"
|
||||
v-else-if="choseType === '周'"
|
||||
@change="handleDateChange"
|
||||
v-model="currentDate"
|
||||
format="YYYY年MM月DD日"
|
||||
/>
|
||||
<!-- 月选择器 -->
|
||||
<a-month-picker
|
||||
class="w-188px size-14px"
|
||||
v-else
|
||||
@change="handleDateChange"
|
||||
v-model="currentDate"
|
||||
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;
|
||||
const selectedDate = val instanceof Date ? val : 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(), // 父组件直接可用的日期范围
|
||||
};
|
||||
emit('update:modelValue', result);
|
||||
// 只有在初始化完成后才触发 date-change 事件
|
||||
if (!isInitializing) {
|
||||
console.log('emitChange', result);
|
||||
emit('date-change', result); // 父组件监听此事件做后续处理
|
||||
}
|
||||
};
|
||||
|
||||
// 11. 监听父组件Props变化（同步外部修改）
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
choseType.value = newVal.choseType;
|
||||
dayModel.value = newVal.dayModel || new Date();
|
||||
weekModel.value = newVal.weekModel || new Date();
|
||||
monthModel.value = newVal.monthModel || new Date();
|
||||
// 只有在初始化完成后才触发 emitChange
|
||||
if (!isInitializing) {
|
||||
emitChange();
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// 初始化时触发一次事件
|
||||
emitChange();
|
||||
|
||||
// 初始化完成，设置标志位
|
||||
setTimeout(() => {
|
||||
isInitializing = false;
|
||||
}, 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: 80px !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>
|
||||
@ -1,69 +1,84 @@
|
||||
<!-- // 新增内容： -->
|
||||
<template>
|
||||
<a-popover trigger="click" :overlayStyle="{ width: '360px' }" overlayClassName="filter-popup-popover">
|
||||
<template #content>
|
||||
<div class="filter-popup-content">
|
||||
<!-- 运营人员 -->
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-70px">运营人员</div>
|
||||
<a-space class="w-240px">
|
||||
<CommonSelect
|
||||
placeholder="请选择运营人员"
|
||||
:options="operators || []"
|
||||
v-model="localQuery.operator"
|
||||
@change="(val) => handleChange('operator_id', val)"
|
||||
class="!w-240px"
|
||||
:allowSearch="true"
|
||||
popup-container=".filter-popup-content"
|
||||
/>
|
||||
</a-space>
|
||||
<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-start 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-start 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-start 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>
|
||||
<!-- 发布平台 -->
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-70px">发布平台</div>
|
||||
<a-space class="w-240px">
|
||||
<CommonSelect
|
||||
:options="platformOptions || []"
|
||||
v-model="localQuery.platform"
|
||||
@change="(val) => handleChange('platform', val)"
|
||||
class="!w-240px"
|
||||
placeholder="请选择发布平台"
|
||||
:allowSearch="true"
|
||||
popup-container=".filter-popup-content"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 账号名称 -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-70px">账号名称</div>
|
||||
<a-space class="w-240px">
|
||||
<CommonSelect
|
||||
v-model="localQuery.accounts"
|
||||
:options="accountList || []"
|
||||
:multiple="true"
|
||||
@change="(val) => handleChange('account_id', val)"
|
||||
class="!w-240px"
|
||||
placeholder="请选择账号名称"
|
||||
:allowSearch="true"
|
||||
popup-container=".filter-popup-content"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-button size="small">
|
||||
<template #icon>
|
||||
<FilterOutlined class="color-#55585F" />
|
||||
</template>
|
||||
<template #default>筛选</template>
|
||||
</a-button>
|
||||
</a-popover>
|
||||
|
||||
<!-- 触发按钮：添加点击事件控制弹窗显示 -->
|
||||
<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 } from 'vue';
|
||||
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,
|
||||
@ -71,39 +86,52 @@ const props = defineProps({
|
||||
query: Object,
|
||||
});
|
||||
|
||||
onMounted(() => {});
|
||||
const emit = defineEmits(['filter-change']);
|
||||
|
||||
// 初始化本地查询对象，只设置非空值
|
||||
const localQuery = ref({});
|
||||
// 弹窗显示状态（关键：控制弹窗显示的核心变量）
|
||||
const visible = ref(false);
|
||||
|
||||
// 监听外部 query 变化并同步到本地状态
|
||||
// 本地筛选状态（保持上次选择）
|
||||
const localQuery = ref({
|
||||
operator: props.query?.operator_ids,
|
||||
platform: props.query?.platforms,
|
||||
accounts: props.query?.ids || [],
|
||||
});
|
||||
|
||||
// 监听父组件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 };
|
||||
localQuery.value = {
|
||||
operator: newQuery.operator_ids,
|
||||
platform: newQuery.platforms,
|
||||
accounts: newQuery.ids || [],
|
||||
};
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
);
|
||||
|
||||
// 处理筛选变化
|
||||
// 处理筛选条件变化（不关闭弹窗，直接触发筛选）
|
||||
const handleChange = (field, value) => {
|
||||
localQuery.value[field] = value;
|
||||
console.log(localQuery.value);
|
||||
emit('filter-change', { ...localQuery.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>
|
||||
|
||||
@ -113,9 +141,41 @@ const handleChange = (field, value) => {
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
margin-top: 8px;
|
||||
margin-right: 50px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
.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>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user