YZWater3/src/YZWater.Avalonia/Views/ViewCView.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:YZWater.Core.ViewModels"
             xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
             x:Class="YZWater.Avalonia.Views.ViewCView"
             x:DataType="vm:ViewCViewModel">

    <UserControl.DataContext>
        <vm:ViewCViewModel/>
    </UserControl.DataContext>

    <Border Background="{DynamicResource AppBgBrush}">
        <Grid RowDefinitions="48,*,32">
            <!-- 顶部 -->
            <Border Grid.Row="0" Background="{DynamicResource SurfaceBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,0,0,1">
                <Grid Margin="16,0">
                    <StackPanel Orientation="Horizontal" Spacing="12" VerticalAlignment="Center">
                        <Border Background="#4CAF50" Width="3" Height="20" CornerRadius="1"/>
                        <TextBlock Text="FLOW RECORDS" FontFamily="{DynamicResource MonoFont}" FontSize="16" FontWeight="Bold"
                                   Foreground="{DynamicResource TextPrimaryBrush}" VerticalAlignment="Center"/>
                        <TextBlock Text="流量历史数据" FontSize="12" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
                    </StackPanel>
                </Grid>
            </Border>

            <!-- 内容 -->
            <Grid Grid.Row="1" RowDefinitions="Auto,*,Auto" Margin="8,4">

                <!-- 查询条件 -->
                <Border Grid.Row="0" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
                        BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="12" Margin="0,0,0,4">
                    <StackPanel Orientation="Horizontal" Spacing="16">
                        <StackPanel Orientation="Horizontal" Spacing="6">
                            <TextBlock Text="FROM" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
                            <DatePicker SelectedDate="{Binding StartDate}" Width="150"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Spacing="6">
                            <TextBlock Text="TO" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
                            <DatePicker SelectedDate="{Binding EndDate}" Width="150"/>
                        </StackPanel>
                        <Button Content="QUERY" Command="{Binding LoadFlowRecordsCommand}" Classes="btn-info"/>
                        <Button Content="EXPORT CSV" Command="{Binding ExportDataCommand}" Classes="btn-success"/>
                        <Button Content="PURGE OLD" Command="{Binding ClearOldDataCommand}" Classes="btn-danger"/>
                    </StackPanel>
                </Border>

                <!-- 图表 -->
                <Border Grid.Row="1" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
                        BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="12" Margin="0,0,0,4">
                    <ScrollViewer>
                        <StackPanel>
                            <StackPanel Orientation="Horizontal" Spacing="6" Margin="0,0,0,8">
                                <Border Background="#4CAF50" Width="3" Height="14" CornerRadius="1"/>
                                <TextBlock Text="INFLOW TREND" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextSecondaryBrush}"/>
                            </StackPanel>
                            <lvc:CartesianChart Series="{Binding InflowSeries}" XAxes="{Binding XAxes}" YAxes="{Binding YAxes}" Height="200"/>

                            <StackPanel Orientation="Horizontal" Spacing="6" Margin="0,16,0,8">
                                <Border Background="#2196F3" Width="3" Height="14" CornerRadius="1"/>
                                <TextBlock Text="OUTFLOW TREND" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextSecondaryBrush}"/>
                            </StackPanel>
                            <lvc:CartesianChart Series="{Binding OutflowSeries}" XAxes="{Binding XAxes}" YAxes="{Binding YAxes}" Height="200"/>
                        </StackPanel>
                    </ScrollViewer>
                </Border>

                <!-- 数据表格 -->
                <Border Grid.Row="2" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
                        BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="8">
                    <DataGrid ItemsSource="{Binding FlowRecords}" AutoGenerateColumns="False" IsReadOnly="True" Height="150">
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="TIME" Binding="{Binding RecordTime, StringFormat='{}{0:yyyy-MM-dd HH:mm:ss}'}" Width="160"/>
                            <DataGridTextColumn Header="IN (m³/h)" Binding="{Binding InflowRate, StringFormat='{}{0:F1}'}" Width="100"/>
                            <DataGridTextColumn Header="OUT (m³/h)" Binding="{Binding OutflowRate, StringFormat='{}{0:F1}'}" Width="100"/>
                            <DataGridTextColumn Header="TOTAL IN (m³)" Binding="{Binding TotalInflow, StringFormat='{}{0:F1}'}" Width="120"/>
                            <DataGridTextColumn Header="TOTAL OUT (m³)" Binding="{Binding TotalOutflow, StringFormat='{}{0:F1}'}" Width="120"/>
                        </DataGrid.Columns>
                    </DataGrid>
                </Border>
            </Grid>

            <!-- 底部 -->
            <Border Grid.Row="2" Background="{DynamicResource SurfaceBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,1,0,0">
                <TextBlock Text="FLOW DATA v1.0" FontFamily="{DynamicResource MonoFont}" FontSize="10"
                           Foreground="{DynamicResource TextDisabledBrush}" VerticalAlignment="Center" Margin="16,0"/>
            </Border>
        </Grid>
    </Border>
</UserControl>