Files
Better-Seewo/Manager/Pages/InkPage.xaml

542 lines
33 KiB
Plaintext
Raw Normal View History

<Page x:Class="Better_Seewo.Manager.Pages.InkPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="800" d:DesignWidth="960"
FontFamily="Microsoft YaHei UI"
Title="墨迹管理">
<!-- 页面资源字典 -->
<Page.Resources>
<!-- 悬停上浮卡片样式 -->
<Style x:Key="HoverCardStyle" TargetType="Border">
<Setter Property="Background" Value="{DynamicResource CardBackgroundBrush}"/>
<Setter Property="CornerRadius" Value="12"/>
<Setter Property="Padding" Value="24"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Style.Triggers>
<!-- 悬停上浮效果TranslateY -2px + 阴影加深 -->
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)"
To="-2" Duration="0:0:0.200">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)"
To="0" Duration="0:0:0.200">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
<!-- 进度条动画的渐变画笔(从左到右流动) -->
<LinearGradientBrush x:Key="ProgressGradient" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="{DynamicResource AccentColor}" Offset="0.0"/>
<GradientStop Color="{DynamicResource AccentColor}" Offset="0.5"/>
<GradientStop Color="{DynamicResource AccentColor}" Offset="0.5"/>
<GradientStop Color="Transparent" Offset="1.0"/>
</LinearGradientBrush>
<!-- 操作按钮样式 -->
<Style x:Key="InkActionButtonStyle" TargetType="Button">
<Setter Property="Background" Value="{DynamicResource AccentBrush}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="Padding" Value="24,10"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="btnBorder"
Background="{TemplateBinding Background}"
CornerRadius="8"
Padding="{TemplateBinding Padding}"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<ScaleTransform ScaleX="1.0" ScaleY="1.0"/>
</Border.RenderTransform>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="btnBorder"
Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
To="1.03" Duration="0:0:0.150">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="btnBorder"
Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"
To="1.03" Duration="0:0:0.150">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="btnBorder"
Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
To="1.0" Duration="0:0:0.150">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="btnBorder"
Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"
To="1.0" Duration="0:0:0.150">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 浏览按钮样式 -->
<Style x:Key="BrowseButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{DynamicResource AccentBrush}"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="Padding" Value="16,8"/>
<Setter Property="BorderThickness" Value="1.5"/>
<Setter Property="BorderBrush" Value="{DynamicResource AccentBrush}"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="btnBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="6"
Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="btnBorder" Property="Background"
Value="{DynamicResource AccentBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<!-- 主背景 -->
<Grid Background="{DynamicResource BackgroundBrush}">
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled">
<StackPanel Margin="40,30,40,40">
<!-- ====== 顶部标题区域 ====== -->
<StackPanel Margin="0,0,0,25">
<TextBlock Text="墨迹管理"
FontSize="28"
FontWeight="Bold"
Foreground="{DynamicResource TextPrimaryBrush}"/>
<TextBlock Text="导入和导出白板墨迹数据"
FontSize="13"
Foreground="{DynamicResource TextSecondaryBrush}"
Margin="0,4,0,0"/>
</StackPanel>
<!-- ====== 左右双栏布局 ====== -->
<Grid Margin="0,0,0,20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- ====== 左侧:导出墨迹卡片 ====== -->
<Border Grid.Column="0"
Style="{StaticResource HoverCardStyle}">
<Border.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Border.RenderTransform>
<StackPanel>
<!-- 导出标题 -->
<StackPanel Orientation="Horizontal" Margin="0,0,0,18">
<Border Background="{DynamicResource AccentBrush}"
CornerRadius="4"
Padding="8,4"
Margin="0,0,10,0">
<TextBlock Text="导出"
FontSize="12"
FontWeight="Bold"
Foreground="White"/>
</Border>
<TextBlock Text="导出墨迹数据"
FontSize="16"
FontWeight="SemiBold"
Foreground="{DynamicResource TextPrimaryBrush}"
VerticalAlignment="Center"/>
</StackPanel>
<!-- 文件名输入 -->
<TextBlock Text="导出文件名"
FontSize="13"
Foreground="{DynamicResource TextSecondaryBrush}"
Margin="0,0,0,6"/>
<Border Background="{DynamicResource BackgroundBrush}"
BorderBrush="{DynamicResource BorderBrush}"
BorderThickness="1"
CornerRadius="6"
Padding="10,8"
Margin="0,0,0,14">
<TextBox x:Name="ExportFileName"
Text="课件墨迹"
BorderThickness="0"
Background="Transparent"
FontSize="14"
Foreground="{DynamicResource TextPrimaryBrush}"
CaretBrush="{DynamicResource AccentBrush}"/>
</Border>
<!-- 保存位置选择 -->
<TextBlock Text="保存位置"
FontSize="13"
Foreground="{DynamicResource TextSecondaryBrush}"
Margin="0,0,0,6"/>
<StackPanel Orientation="Horizontal" Margin="0,0,0,14">
<Border Background="{DynamicResource BackgroundBrush}"
BorderBrush="{DynamicResource BorderBrush}"
BorderThickness="1"
CornerRadius="6"
Padding="10,8"
HorizontalAlignment="Stretch">
<TextBox x:Name="ExportFolderPath"
Text="C:\Users\User\Documents"
BorderThickness="0"
Background="Transparent"
FontSize="13"
Foreground="{DynamicResource TextPrimaryBrush}"
CaretBrush="{DynamicResource AccentBrush}"
Width="250"
IsReadOnly="True"/>
</Border>
<Button Content="浏览..."
Style="{StaticResource BrowseButtonStyle}"
Margin="8,0,0,0"
Click="BtnBrowseExportPath_Click"/>
</StackPanel>
<!-- 导出进度条(默认隐藏) -->
<StackPanel x:Name="ExportProgressPanel" Visibility="Collapsed" Margin="0,0,0,14">
<TextBlock Text="正在导出..."
FontSize="12"
Foreground="{DynamicResource TextSecondaryBrush}"
Margin="0,0,0,6"/>
<Border Background="{DynamicResource BackgroundBrush}"
CornerRadius="4"
Height="6"
ClipToBounds="True">
<Rectangle x:Name="ExportProgressBar"
Width="0"
Height="6"
RadiusX="3" RadiusY="3"
Fill="{DynamicResource AccentBrush}">
<Rectangle.RenderTransform>
<ScaleTransform ScaleX="0" ScaleY="1"/>
</Rectangle.RenderTransform>
</Rectangle>
</Border>
<TextBlock x:Name="ExportProgressText"
Text="0%"
FontSize="11"
Foreground="{DynamicResource TextSecondaryBrush}"
Margin="0,4,0,0"/>
</StackPanel>
<!-- 导出按钮 -->
<Button x:Name="BtnExport"
Content="导出墨迹"
Style="{StaticResource InkActionButtonStyle}"
HorizontalAlignment="Stretch"
Click="BtnExport_Click"/>
<!-- 最近导出历史 -->
<TextBlock Text="最近导出记录"
FontSize="13"
FontWeight="SemiBold"
Foreground="{DynamicResource TextPrimaryBrush}"
Margin="0,18,0,8"/>
<Border Background="{DynamicResource BackgroundBrush}"
CornerRadius="8"
ClipToBounds="True"
MaxHeight="180">
<ListBox x:Name="ExportHistoryList"
Background="Transparent"
BorderThickness="0"
Padding="4"
FontSize="12"
Foreground="{DynamicResource TextSecondaryBrush}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,6,0,6">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FileName}"
FontWeight="Medium"
Foreground="{DynamicResource TextPrimaryBrush}"/>
<TextBlock Text=" - "
Foreground="{DynamicResource TextSecondaryBrush}"/>
<TextBlock Text="{Binding FileSize}"
Foreground="{DynamicResource TextSecondaryBrush}"/>
</StackPanel>
<TextBlock Text="{Binding Time}"
FontSize="11"
Foreground="{DynamicResource TextSecondaryBrush}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
</StackPanel>
</Border>
<!-- ====== 右侧:导入墨迹卡片 ====== -->
<Border Grid.Column="2"
Style="{StaticResource HoverCardStyle}">
<Border.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Border.RenderTransform>
<StackPanel>
<!-- 导入标题 -->
<StackPanel Orientation="Horizontal" Margin="0,0,0,18">
<Border Background="{DynamicResource AccentBrush}"
CornerRadius="4"
Padding="8,4"
Margin="0,0,10,0">
<TextBlock Text="导入"
FontSize="12"
FontWeight="Bold"
Foreground="White"/>
</Border>
<TextBlock Text="导入墨迹数据"
FontSize="16"
FontWeight="SemiBold"
Foreground="{DynamicResource TextPrimaryBrush}"
VerticalAlignment="Center"/>
</StackPanel>
<!-- 文件选择区域 -->
<TextBlock Text="选择墨迹文件 (*.ink.json)"
FontSize="13"
Foreground="{DynamicResource TextSecondaryBrush}"
Margin="0,0,0,6"/>
<Border Background="{DynamicResource BackgroundBrush}"
BorderBrush="{DynamicResource BorderBrush}"
BorderThickness="1"
CornerRadius="6"
Padding="12"
Margin="0,0,0,14"
Cursor="Hand"
x:Name="ImportFileDropZone"
MouseLeftButtonUp="ImportFileDropZone_Click">
<StackPanel HorizontalAlignment="Center">
<!-- 文件图标用Path绘制 -->
<Path Data="M0,4 L0,42 L32,42 L32,12 L24,4 Z M24,4 L24,12 L32,12"
Stroke="{DynamicResource TextSecondaryBrush}"
StrokeThickness="1.5"
Fill="Transparent"
Stretch="Uniform"
HorizontalAlignment="Center"
Height="40"
Width="40"
Margin="0,0,0,8"/>
<TextBlock x:Name="ImportFileNameText"
Text="点击选择文件或拖拽到此处"
FontSize="13"
Foreground="{DynamicResource TextSecondaryBrush}"
HorizontalAlignment="Center"/>
</StackPanel>
</Border>
<!-- 文件预览区 -->
<TextBlock Text="文件预览"
FontSize="13"
FontWeight="SemiBold"
Foreground="{DynamicResource TextPrimaryBrush}"
Margin="0,0,0,8"/>
<Border x:Name="ImportPreviewPanel"
Background="{DynamicResource BackgroundBrush}"
BorderBrush="{DynamicResource BorderBrush}"
BorderThickness="1"
CornerRadius="8"
Padding="16">
<StackPanel x:Name="ImportPreviewContent">
<!-- 空状态用Path画一个墨迹图形 -->
<StackPanel x:Name="InkEmptyState" HorizontalAlignment="Center">
<Path Data="M10,40 C15,20 25,50 35,30 S55,10 60,35 S75,45 80,25 S90,15 95,40"
Stroke="{DynamicResource TextSecondaryBrush}"
StrokeThickness="2"
Fill="Transparent"
Stretch="Uniform"
HorizontalAlignment="Center"
Height="60"
Width="120"
Margin="0,0,0,8"
StrokeLineJoin="Round"
StrokeDashArray="4,3"/>
<Path Data="M15,55 C25,45 40,65 55,50 S70,40 85,55"
Stroke="{DynamicResource TextSecondaryBrush}"
StrokeThickness="1.5"
Fill="Transparent"
Stretch="Uniform"
HorizontalAlignment="Center"
Height="30"
Width="100"
StrokeLineJoin="Round"
Opacity="0.5"/>
<TextBlock Text="暂未选择文件"
FontSize="12"
Foreground="{DynamicResource TextSecondaryBrush}"
HorizontalAlignment="Center"
Margin="0,8,0,0"/>
</StackPanel>
<!-- 文件信息(默认隐藏) -->
<StackPanel x:Name="InkInfoPanel" Visibility="Collapsed">
<StackPanel Orientation="Horizontal" Margin="0,0,0,8">
<TextBlock Text="笔画数量:"
FontSize="13"
Foreground="{DynamicResource TextSecondaryBrush}"/>
<TextBlock x:Name="StrokeCountText"
Text="0"
FontSize="13"
FontWeight="Medium"
Foreground="{DynamicResource TextPrimaryBrush}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,0,8">
<TextBlock Text="墨迹时间:"
FontSize="13"
Foreground="{DynamicResource TextSecondaryBrush}"/>
<TextBlock x:Name="InkTimestampText"
Text="-"
FontSize="13"
FontWeight="Medium"
Foreground="{DynamicResource TextPrimaryBrush}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,0,8">
<TextBlock Text="文件大小:"
FontSize="13"
Foreground="{DynamicResource TextSecondaryBrush}"/>
<TextBlock x:Name="InkFileSizeText"
Text="-"
FontSize="13"
FontWeight="Medium"
Foreground="{DynamicResource TextPrimaryBrush}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,0,8">
<TextBlock Text="数据格式:"
FontSize="13"
Foreground="{DynamicResource TextSecondaryBrush}"/>
<TextBlock x:Name="InkFormatText"
Text="ink.json"
FontSize="13"
FontWeight="Medium"
Foreground="{DynamicResource TextPrimaryBrush}"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Border>
<!-- 导入进度条(默认隐藏) -->
<StackPanel x:Name="ImportProgressPanel" Visibility="Collapsed" Margin="0,14,0,14">
<TextBlock Text="正在导入..."
FontSize="12"
Foreground="{DynamicResource TextSecondaryBrush}"
Margin="0,0,0,6"/>
<Border Background="{DynamicResource BackgroundBrush}"
CornerRadius="4"
Height="6"
ClipToBounds="True">
<Rectangle x:Name="ImportProgressBar"
Width="0"
Height="6"
RadiusX="3" RadiusY="3"
Fill="{DynamicResource AccentBrush}">
<Rectangle.RenderTransform>
<ScaleTransform ScaleX="0" ScaleY="1"/>
</Rectangle.RenderTransform>
</Rectangle>
</Border>
<TextBlock x:Name="ImportProgressText"
Text="0%"
FontSize="11"
Foreground="{DynamicResource TextSecondaryBrush}"
Margin="0,4,0,0"/>
</StackPanel>
<!-- 导入按钮 -->
<Button x:Name="BtnImport"
Content="导入墨迹"
Style="{StaticResource InkActionButtonStyle}"
HorizontalAlignment="Stretch"
IsEnabled="False"
Click="BtnImport_Click"/>
</StackPanel>
</Border>
</Grid>
<!-- ====== 底部提示信息 ====== -->
<Border Background="{DynamicResource CardBackgroundBrush}"
CornerRadius="10"
Padding="16">
<StackPanel Orientation="Horizontal">
<TextBlock Text="提示:"
FontSize="12"
FontWeight="SemiBold"
Foreground="{DynamicResource AccentBrush}"
VerticalAlignment="Center"/>
<TextBlock Text="墨迹数据以 ink.json 格式存储,包含所有白板书写记录。导入前请确保文件格式正确。"
FontSize="12"
Foreground="{DynamicResource TextSecondaryBrush}"
TextWrapping="Wrap"
VerticalAlignment="Center"/>
</StackPanel>
</Border>
</StackPanel>
</ScrollViewer>
</Grid>
</Page>