data-marketing-platform/src/views/count/user/adduser/index.vue

<template>
	<div class="layout-padding">
		<div class="!overflow-auto px-1">
			<!-- 头部筛选区域 -->
			<div class="el-card p-9">
				<div class="flex justify-between">
					<Title :title="t('addUser.analytics')" />
					<div class="">
						<el-button type="primary">{{ t('addUser.growth') }}</el-button>
						<el-button type="primary">{{ t('addUser.ai') }}</el-button>
					</div>
				</div>
				<div class="mt-2">
					<el-row shadow="hover" class="ml10">
						<el-form :inline="true" :model="formData" ref="queryRef">
							<el-form-item>
								<el-date-picker
									v-model="formData.time"
									type="daterange"
									value-format="YYYY-MM-DD"
									@change="query"
									class="!w-[250px]"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
								/>
							</el-form-item>

							<el-form-item>
								<FilterSelect v-model="formData.channel" type="channel" @change="query" class="!w-[180px] ml-2" />
							</el-form-item>
							<el-form-item>
								<FilterSelect v-model="formData.version" type="version" @change="query" class="!w-[180px] ml-2" />
							</el-form-item>
						</el-form>
					</el-row>
				</div>
			</div>
			
			<!-- 新增趋势模块 -->
			<div class="mt-3">
				<AddTrend :form-data="formData" @query="query" />
			</div>
			
			<!-- 用户质量模块 -->
			<div class="mt-3">
				<UserQuality :form-data="formData" @query="query" />
			</div>
			
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';
import { useI18n } from 'vue-i18n';
import dayjs from 'dayjs';

const { t } = useI18n();
const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue'));
const FilterSelect = defineAsyncComponent(() => import('/@/components/common/filter-select.vue'));
const AddTrend = defineAsyncComponent(() => import('./components/AddTrend.vue'));
const UserQuality = defineAsyncComponent(() => import('./components/UserQuality.vue'));
// 计算默认时间范围（半个月前到今天）
const getDefaultDateRange = () => {
  const endDate = dayjs();
  const startDate = endDate.subtract(15, 'day');
  return [startDate.format('YYYY-MM-DD'), endDate.format('YYYY-MM-DD')];
};
const formData = ref<Record<string, any>>({
	time: getDefaultDateRange(), // 时间范围
});
const query = () => {
	console.log(formData.value);
};
</script>

<style lang="scss" scoped>
.el-form-item--default {
	margin-bottom: 0;
}
.el-form.el-form--inline .el-form-item--default.el-form-item:last-of-type,
.el-form.el-form--inline .el-form-item--small.el-form-item:last-of-type {
	margin-bottom: 0 !important;
}
</style>