更新

admin/src/views/first_visit/conversion/index.vue

@@ -61,12 +61,23 @@
                     class="channel-select"
                     @change="loadDashboard"
                 >
-                    <el-option
-                        v-for="item in dashboard.filters.media_channels"
-                        :key="item.code"
-                        :label="item.name"
-                        :value="item.code"
-                    />
+                    <el-option-group
+                        v-for="group in mediaChannelGroups"
+                        :key="group.group_name || '_'"
+                        :label="`${group.group_name || '（未分组）'} · ${group.customer_count}`"
+                    >
+                        <el-option
+                            v-for="item in group.channels"
+                            :key="item.code"
+                            :label="item.name"
+                            :value="item.code"
+                        >
+                            <span class="channel-option">
+                                <span>{{ item.name }}</span>
+                                <span>{{ item.customer_count }} 人</span>
+                            </span>
+                        </el-option>
+                    </el-option-group>
                 </el-select>
             </div>
             <span class="range-text">{{ dashboard.meta.start_date }} 至 {{ dashboard.meta.end_date }}</span>
@@ -246,6 +257,13 @@ import vCharts from 'vue-echarts'
 import { firstVisitConversionOverview, type FirstVisitConversionParams } from '@/api/first_visit'
 
 type MetricType = 'count' | 'money' | 'ratio'
+type MediaChannelOption = {
+    code: string
+    name: string
+    tag_id?: string
+    group_name?: string
+    customer_count?: number
+}
 
 const emptyDashboard = () => ({
     meta: {
@@ -256,7 +274,7 @@ const emptyDashboard = () => ({
     filters: {
         departments: [] as any[],
         assistants: [] as Array<{ id: number; name: string }>,
-        media_channels: [] as Array<{ code: string; name: string }>
+        media_channels: [] as MediaChannelOption[]
     },
     summary: {} as Record<string, any>,
     rankings: { orders: [] as any[], amounts: [] as any[] },
@@ -303,6 +321,23 @@ const scopeDescription = computed(() => {
     if (dashboard.meta.selected_media_channel_name) parts.push(`渠道：${dashboard.meta.selected_media_channel_name}`)
     return parts.join(' · ')
 })
+const mediaChannelGroups = computed(() => {
+    const groups = new Map<string, {
+        group_name: string
+        customer_count: number
+        channels: MediaChannelOption[]
+    }>()
+    for (const channel of dashboard.filters.media_channels) {
+        const groupName = channel.group_name || ''
+        if (!groups.has(groupName)) {
+            groups.set(groupName, { group_name: groupName, customer_count: 0, channels: [] })
+        }
+        const group = groups.get(groupName)!
+        group.channels.push(channel)
+        group.customer_count = Math.max(group.customer_count, Number(channel.customer_count || 0))
+    }
+    return Array.from(groups.values())
+})
 const maxOrderValue = computed(() => Math.max(0, ...dashboard.rankings.orders.map(item => Number(item.value || 0))))
 const maxAmountValue = computed(() => Math.max(0, ...dashboard.rankings.amounts.map(item => Number(item.value || 0))))
 const targetChartOption = computed(() => ({
@@ -445,6 +480,18 @@ onMounted(loadDashboard)
 .employee-select { width: 190px; }
 .dept-select { width: 220px; }
 .channel-select { width: 180px; }
+.channel-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    width: 100%;
+
+    span:last-child {
+        color: #98a2b3;
+        font-size: 12px;
+    }
+}
 
 .metric-grid {
     display: grid;