Dashboard generated by gemini-3-pro and some issues

[v479038280]

I used Gemini 3 Pro to create a beautiful dashboard, and the effect is very good. However, I encountered a small issue during its operation, which might be a problem with NiceGUI.

from nicegui import ui

# --- 全局设计系统 ---
# 字体：优先使用系统无衬线字体，保持清晰
ui.query('body').style('background-color: #f1f5f9; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;')

# 颜色常量
COLOR_BLUE = '#2563eb'     # 鲜亮蓝 (Tailwind blue-600)
COLOR_GREEN = '#65a30d'    # 草地绿 (Tailwind lime-600)
COLOR_NAVY = '#1e3a8a'     # 深海军蓝 (Tailwind blue-900)
COLOR_TEXT = '#334155'     # 正文灰 (Slate-700)
BORDER_COLOR = '#e2e8f0'   # 边框灰 (Slate-200)

# 卡片样式核心：
# 1. bg-white: 纯白背景
# 2. rounded-lg: 适中的圆角 (不是xl，原图看起来稍微方一点)
# 3. border border-slate-200: 极细的边框
# 4. shadow-sm: 极淡的阴影
CARD_CLASS = 'bg-white rounded-lg border border-slate-200 shadow-[0_1px_2px_rgba(0,0,0,0.03)]'

# --- ECharts 图表定义 ---

def timeline_chart():
    return ui.echart({
        'tooltip': {'trigger': 'axis', 'backgroundColor': 'rgba(255,255,255,0.95)', 'borderColor': BORDER_COLOR, 'textStyle': {'color': '#333'}},
        'legend': {'data': ['Spend', 'Revenue'], 'top': 0, 'icon': 'circle', 'itemGap': 25},
        'grid': {'left': '2%', 'right': '3%', 'bottom': '2%', 'top': '15%', 'containLabel': True},
        'xAxis': {
            'type': 'category', 'boundaryGap': False, 
            'data': ['Jan 24', 'Feb 24', 'Mar 24', 'Apr 24', 'May 24', 'Jun 24'],
            'axisLine': {'lineStyle': {'color': '#cbd5e1'}}, 'axisLabel': {'color': '#64748b'}
        },
        'yAxis': [
            {'type': 'value', 'splitLine': {'lineStyle': {'type': 'dashed', 'color': '#f1f5f9'}}},
            {'type': 'value', 'show': False} # 隐藏右侧Y轴刻度，保持干净
        ],
        'series': [
            {
                'name': 'Spend', 'type': 'line', 'smooth': True, 'symbol': 'circle', 'symbolSize': 6,
                'data': [30, 40, 15, 60, 40, 20], 
                'itemStyle': {'color': '#3b82f6'}, 
                'areaStyle': {'opacity': 0.2, 'color': '#3b82f6'}
            },
            {
                'name': 'Revenue', 'type': 'line', 'smooth': True, 'symbol': 'circle', 'symbolSize': 6,
                'data': [15, 60, 25, 38, 60, 38], 
                'itemStyle': {'color': '#84cc16'}, 
                'areaStyle': {'opacity': 0.2, 'color': '#84cc16'}
            }
        ]
    }).classes('w-full h-full')

def bar_chart():
    return ui.echart({
        'tooltip': {'trigger': 'axis'},
        'grid': {'left': '5%', 'right': '5%', 'bottom': '5%', 'top': '10%', 'containLabel': True},
        'xAxis': {'type': 'category', 'data': ['10-20', '20-30', '30-40', '40-50', '50-60', '60+'], 'axisTick': {'show': False}, 'axisLine': {'lineStyle': {'color': '#cbd5e1'}}},
        'yAxis': {'type': 'value', 'splitLine': {'lineStyle': {'type': 'dashed', 'color': '#f1f5f9'}}},
        'series': [{'data': [3, 4, 1.5, 6, 4, 2], 'type': 'bar', 'itemStyle': {'color': '#2563eb', 'borderRadius': [3, 3, 0, 0]}, 'barWidth': '45%'}]
    }).classes('w-full h-full')

def funnel_chart():
    return ui.echart({
        'series': [{
            'type': 'funnel', 'left': 'center', 'width': '90%', 'top': 5, 'bottom': 5,
            'sort': 'descending', 'gap': 1,
            'label': {'position': 'inside', 'color': '#fff', 'fontSize': 10},
            'data': [
                {'value': 100, 'name': 'Traffic', 'itemStyle': {'color': '#1e40af'}},
                {'value': 75, 'name': 'Clicks', 'itemStyle': {'color': '#65a30d'}},
                {'value': 50, 'name': 'Leads', 'itemStyle': {'color': '#a16207'}},
                {'value': 25, 'name': 'Sales', 'itemStyle': {'color': '#94a3b8'}}
            ]
        }]
    }).classes('w-full h-full')

def heatmap_chart():
    hours = ['S', 'I', 'C', 'T']
    days = ['FB', 'Ins', 'Tw', 'YT', 'In']
    data = [[i, j, (i+j+1)*10] for i in range(5) for j in range(4)]
    return ui.echart({
        'tooltip': {'position': 'top'},
        'grid': {'top': '5%', 'bottom': '10%', 'left': '12%', 'right': '5%'},
        'xAxis': {'type': 'category', 'data': days, 'splitArea': {'show': True, 'areaStyle': {'color': ['#fff', '#fff']}}, 'axisLine': {'show': False}, 'axisTick': {'show': False}},
        'yAxis': {'type': 'category', 'data': hours, 'splitArea': {'show': True}, 'axisLine': {'show': False}, 'axisTick': {'show': False}},
        'visualMap': {'min': 0, 'max': 100, 'calculable': False, 'show': False, 'inRange': {'color': ['#f0f9ff', '#0284c7']}},
        'series': [{'type': 'heatmap', 'data': data, 'label': {'show': True, 'color': '#64748b', 'fontSize': 10}, 'itemStyle': {'borderWidth': 2, 'borderColor': '#fff'}}]
    }).classes('w-full h-full')

# --- 组件封装 ---

def kpi_card(title, value, subtext, change_text, is_positive, curr_pct, prev_pct):
    # 使用 items-stretch 的关键在于让这个卡片撑满父容器的高度
    with ui.card().classes(f'{CARD_CLASS} p-3 flex flex-col justify-between h-full gap-1'):
        ui.label(title).classes('text-blue-900 font-bold text-[11px] tracking-tight uppercase')
        ui.label(value).classes('text-xl font-bold text-slate-800 leading-none my-0.5')
        
        # 变化率
        with ui.row().classes('text-[10px] items-center gap-1'):
            ui.label(subtext).classes('text-slate-400 font-medium')
            color = 'text-green-600' if is_positive else 'text-red-500'
            arrow = '▲' if is_positive else '▼'
            ui.label(f'({change_text} {arrow})').classes(f'{color} font-bold')

        # 进度条容器 (紧凑)
        with ui.column().classes('w-full gap-1 mt-1'):
            for label, color, pct in [('Curr.', 'bg-blue-600', curr_pct), ('Prev.', 'bg-green-500', prev_pct)]:
                with ui.row().classes('w-full items-center gap-1'):
                    ui.label(label).classes('text-[9px] text-slate-400 w-5 font-semibold')
                    with ui.element('div').classes('flex-grow bg-slate-100 h-1 rounded-full overflow-hidden'):
                        ui.element('div').classes(f'{color} h-full rounded-full').style(f'width: {pct}%')

def header_date_input(label, value):
    # 模拟输入框外观
    with ui.row().classes('items-center border border-slate-200 bg-white rounded px-2 py-1 gap-2'):
        ui.label(label).classes('text-[11px] text-slate-500 font-bold')
        ui.label(value).classes('text-[11px] text-slate-700 font-mono')

# --- 主布局构建 ---

with ui.column().classes('w-full min-h-screen p-6 max-w-[1550px] mx-auto gap-4'):
    
    # 1. 顶部 Header
    with ui.card().classes(f'{CARD_CLASS} w-full p-3 px-4'):
        with ui.row().classes('w-full justify-between items-center'):
            # Logo Area
            with ui.row().classes('items-center gap-3'):
                ui.icon('analytics', color=COLOR_BLUE).classes('text-3xl')
                with ui.column().classes('gap-0'):
                    ui.label('Mokkup.ai').classes('font-bold text-lg text-blue-900 leading-none')
                    ui.label('DASHBOARD').classes('font-bold text-[9px] text-slate-400 tracking-widest')
                ui.element('div').classes('h-6 w-[1px] bg-slate-200 mx-3')
                ui.label('DIGITAL MARKETING DASHBOARD').classes('font-bold text-base text-slate-700')
            
            # Date Inputs
            with ui.row().classes('gap-3'):
                header_date_input('Start:', '01/01/2024')
                header_date_input('End:', '30/06/2025')

    # 2. KPI 区域 (使用 items-stretch 解决对齐问题)
    with ui.row().classes('w-full gap-4 items-stretch flex-nowrap'):
        
        # 2.1 左侧 KPI 网格 (占据剩余空间)
        # grid-cols-6 确保一行排开
        with ui.grid(columns=6).classes('flex-grow gap-4'):
            kpi_card('Total Spend', '125.2K', 'prev 111K', '10%', True, 85, 65)
            kpi_card('Sales Revenue', '73.2K', 'prev 80K', '9.2%', False, 50, 60)
            kpi_card('Website Traffic', '8.2k', 'prev 7.5k', '8.1%', True, 75, 55)
            kpi_card('Conv. Rate', '14.1%', 'prev 15%', '0.9%', False, 45, 50)
            kpi_card('CTR', '25.2%', 'prev 11%', '10%', True, 65, 30)
            kpi_card('CPA', '$5.2', 'prev $3', '53%', False, 90, 45)

        # 2.2 右侧过滤器 (固定宽度，不压缩)
        # 使用 shrink-0 防止被左侧挤压，padding稍微大一点
        with ui.card().classes(f'{CARD_CLASS} w-64 p-4 flex flex-col justify-center gap-3 shrink-0'):
            # 模拟 Select 组件外观
            for label, val in [('Channel Type', 'Organic'), ('Campaign', 'All')]:
                with ui.column().classes('w-full gap-1'):
                    ui.label(label).classes('text-[11px] text-slate-500 font-bold ml-1')
                    with ui.row().classes('w-full border border-slate-300 rounded bg-white px-2 py-1 justify-between items-center cursor-pointer hover:border-blue-400 transition-colors'):
                        ui.label(val).classes('text-sm text-slate-700')
                        ui.icon('arrow_drop_down').classes('text-slate-400 text-xs')

    # 3. 中间图表区 (Timeline + Metric)
    # 设定固定高度 h-80 (约320px) 保持整齐
    with ui.row().classes('w-full gap-4 h-80 flex-nowrap'):
        
        # 3.1 Timeline (左侧 65%)
        with ui.card().classes(f'{CARD_CLASS} w-[65%] h-full p-0 flex flex-col relative'):
            # Header
            with ui.row().classes('w-full justify-between items-start p-4 pb-0'):
                ui.label('Timeline Chart').classes('text-blue-900 font-bold text-sm')
                # 蓝色按钮块
                ui.label('TRAFFIC VS CTR').classes('bg-[#3b82f6] text-white text-[10px] font-bold px-3 py-1.5 rounded shadow-sm cursor-pointer')
            # Chart
            with ui.element('div').classes('flex-grow w-full px-2 pb-2'):
                timeline_chart()

        # 3.2 Metric Dist (右侧 35%)
        with ui.card().classes(f'{CARD_CLASS} flex-grow h-full p-4 flex flex-col'):
            # Header
            with ui.row().classes('w-full justify-between items-center mb-1'):
                ui.label('Metric Dist.').classes('text-blue-900 font-bold text-sm')
                with ui.row().classes('gap-2'):
                    for t in ['Traffic', 'Age']:
                        ui.label(t + ' ▼').classes('text-[10px] text-slate-600 bg-slate-50 border border-slate-200 px-2 py-0.5 rounded cursor-pointer')
            # Chart
            with ui.element('div').classes('flex-grow w-full'):
                bar_chart()

    # 4. 底部数据区 (Funnel + Heatmap + Table)
    # 高度 h-72 (约288px)
    with ui.row().classes('w-full gap-4 h-72 flex-nowrap'):
        
        # 4.1 Funnel (20%)
        with ui.card().classes(f'{CARD_CLASS} w-[20%] h-full p-3 flex flex-col'):
            ui.label('Funnel').classes('text-blue-900 font-bold text-sm mb-1')
            with ui.element('div').classes('flex-grow w-full'):
                funnel_chart()

        # 4.2 Heatmap (25% - 稍微窄一点给表格留空间)
        with ui.card().classes(f'{CARD_CLASS} w-[25%] h-full p-3 flex flex-col'):
            ui.label('Engagement').classes('text-blue-900 font-bold text-sm mb-1')
            with ui.element('div').classes('flex-grow w-full'):
                heatmap_chart()

        # 4.3 Table (剩余空间 ~55%)
        with ui.card().classes(f'{CARD_CLASS} flex-grow h-full p-0 flex flex-col overflow-hidden'):
            with ui.row().classes('p-4 pb-1'):
                ui.label('Campaign Details').classes('text-blue-900 font-bold text-sm')
            
            # 表格配置
            columns = [
                {'name': 'name', 'label': 'Campaign', 'field': 'name', 'align': 'left'},
                {'name': 'clicks', 'label': 'Clicks', 'field': 'clicks', 'align': 'right'},
                {'name': 'spend', 'label': 'Spend', 'field': 'spend', 'align': 'right'},
                {'name': 'rev', 'label': 'Revenue', 'field': 'rev', 'align': 'right'},
            ]
            rows = [
                {'name': 'Tech Trends', 'clicks': 5621, 'spend': '$239', 'rev': '$429'},
                {'name': 'Eco Futures', 'clicks': 70194, 'spend': '$2390', 'rev': '$4350'},
                {'name': 'Accelerate', 'clicks': 1405, 'spend': '$50', 'rev': '$90'},
                {'name': 'Vision 360', 'clicks': 7722, 'spend': '$267', 'rev': '$486'},
                {'name': 'Summer Sale', 'clicks': 1200, 'spend': '$100', 'rev': '$200'},
            ]
            # 自定义 Quasar 表格样式:
            # flat: 去阴影, dense: 紧凑, hide-bottom: 藏起分页
            # 并通过 slot 自定义表头颜色
            table = ui.table(columns=columns, rows=rows, pagination={'rowsPerPage': 5}).classes('w-full')
            table.props('flat dense hide-bottom square')
            table.add_slot('header', r'''
                <q-tr :props="props" class="bg-white border-b border-slate-100">
                    <q-th v-for="col in props.cols" :key="col.name" :props="props" class="text-slate-500 font-bold text-[11px]">
                        {{ col.label }}
                    </q-th>
                </q-tr>
            ''')

ui.run(title='Digital Marketing Dashboard', favicon='📊',port=8080)

When I close the application and run it again, the terminal shows that it is running normally, but the interface cannot be opened. Then the occupancy of port 8080 is as such. It doesn't occur everytime .When I switch to another port, it can run normally again. Could it be that there is an issue with some mechanism handling in NiceGUI when closing the application?

netstat -ano | findstr :8080
 TCP    0.0.0.0:8080           0.0.0.0:0              LISTENING       14244
 TCP    127.0.0.1:8080         127.0.0.1:56346        ESTABLISHED     14244
 TCP    127.0.0.1:8080         127.0.0.1:58212        ESTABLISHED     14244
 TCP    127.0.0.1:8080         127.0.0.1:58282        ESTABLISHED     14244
 TCP    127.0.0.1:8080         127.0.0.1:58872        TIME_WAIT       0
 TCP    127.0.0.1:8080         127.0.0.1:58873        ESTABLISHED     14244
 TCP    127.0.0.1:8080         127.0.0.1:58874        ESTABLISHED     14244
 TCP    127.0.0.1:56346        127.0.0.1:8080         ESTABLISHED     1572
 TCP    127.0.0.1:58212        127.0.0.1:8080         ESTABLISHED     1572
 TCP    127.0.0.1:58280        127.0.0.1:8080         TIME_WAIT       0
 TCP    127.0.0.1:58282        127.0.0.1:8080         ESTABLISHED     1572
 TCP    127.0.0.1:58866        127.0.0.1:8080         TIME_WAIT       0
 TCP    127.0.0.1:58873        127.0.0.1:8080         ESTABLISHED     1572
 TCP    127.0.0.1:58874        127.0.0.1:8080         ESTABLISHED     1572
 TCP    192.168.1.7:2579       221.181.99.18:8080     ESTABLISHED     2840