You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
389 lines
22 KiB
389 lines
22 KiB
<reactive:ReactiveUserControl xmlns="https://github.com/avaloniaui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:vm="using:AuroraDesk.Presentation.ViewModels.Pages"
|
|
xmlns:dialogHost="clr-namespace:DialogHostAvalonia;assembly=DialogHost.Avalonia"
|
|
xmlns:heroicons="clr-namespace:HeroIconsAvalonia.Controls;assembly=HeroIconsAvalonia"
|
|
xmlns:reactive="using:ReactiveUI.Avalonia"
|
|
xmlns:converters="clr-namespace:AuroraDesk.Presentation.Converters;assembly=AuroraDesk.Presentation"
|
|
mc:Ignorable="d"
|
|
x:Class="AuroraDesk.Presentation.Views.Pages.FormPageView"
|
|
x:DataType="vm:FormPageViewModel">
|
|
|
|
<Design.DataContext>
|
|
<vm:FormPageViewModel />
|
|
</Design.DataContext>
|
|
|
|
<dialogHost:DialogHost IsOpen="{Binding IsFormDialogOpen}">
|
|
<dialogHost:DialogHost.DialogContent>
|
|
<Border Background="{StaticResource BackgroundWhite}"
|
|
CornerRadius="16"
|
|
Padding="24"
|
|
Width="480"
|
|
MaxHeight="600">
|
|
<ScrollViewer VerticalScrollBarVisibility="Auto">
|
|
<StackPanel Spacing="18">
|
|
<!-- 标题 -->
|
|
<Grid ColumnDefinitions="Auto,*" ColumnSpacing="12">
|
|
<Border Grid.Column="0"
|
|
Width="40"
|
|
Height="40"
|
|
CornerRadius="20"
|
|
Background="#3B82F6"
|
|
VerticalAlignment="Center">
|
|
<heroicons:HeroIcon Type="DocumentText"
|
|
Width="22"
|
|
Height="22"
|
|
Foreground="White"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"/>
|
|
</Border>
|
|
<StackPanel Grid.Column="1" Spacing="4">
|
|
<TextBlock Text="{Binding FormTitle}"
|
|
FontSize="20"
|
|
FontWeight="SemiBold"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<TextBlock Text="{Binding FormDescription}"
|
|
FontSize="14"
|
|
Foreground="{StaticResource SecondaryGrayDark}"/>
|
|
</StackPanel>
|
|
</Grid>
|
|
|
|
<!-- 表单字段 -->
|
|
<StackPanel Spacing="16">
|
|
<!-- 基础表单：垂直布局 -->
|
|
<StackPanel Spacing="16" IsVisible="{Binding UseHorizontalLayout, Converter={x:Static converters:StringConverters.BoolToVisibilityConverter}, ConverterParameter='Invert'}">
|
|
<!-- 姓名 -->
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="姓名 *"
|
|
FontSize="14"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<TextBox Text="{Binding Name}"
|
|
Watermark="请输入姓名"
|
|
Padding="12,10"
|
|
FontSize="14"/>
|
|
</StackPanel>
|
|
|
|
<!-- 邮箱 -->
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="邮箱 *"
|
|
FontSize="14"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<TextBox Text="{Binding Email}"
|
|
Watermark="请输入邮箱地址"
|
|
Padding="12,10"
|
|
FontSize="14"/>
|
|
</StackPanel>
|
|
|
|
<!-- 电话 -->
|
|
<StackPanel Spacing="6" IsVisible="{Binding ShowPhoneField}">
|
|
<TextBlock Text="电话 *"
|
|
FontSize="14"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<TextBox Text="{Binding Phone}"
|
|
Watermark="请输入电话号码"
|
|
Padding="12,10"
|
|
FontSize="14"/>
|
|
</StackPanel>
|
|
|
|
<!-- 地址 -->
|
|
<StackPanel Spacing="6" IsVisible="{Binding ShowAddressField}">
|
|
<TextBlock Text="地址 *"
|
|
FontSize="14"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<TextBox Text="{Binding Address}"
|
|
Watermark="请输入地址"
|
|
Padding="12,10"
|
|
FontSize="14"/>
|
|
</StackPanel>
|
|
|
|
<!-- 备注 -->
|
|
<StackPanel Spacing="6" IsVisible="{Binding ShowRemarksField}">
|
|
<TextBlock Text="备注 *"
|
|
FontSize="14"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<TextBox Text="{Binding Remarks}"
|
|
Watermark="请输入备注信息"
|
|
Padding="12,10"
|
|
AcceptsReturn="True"
|
|
TextWrapping="Wrap"
|
|
MinHeight="80"
|
|
FontSize="14"/>
|
|
</StackPanel>
|
|
|
|
<!-- 下拉框字段（联系表单） -->
|
|
<StackPanel Spacing="16" IsVisible="{Binding ShowComboBoxFields}">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="国家 *"
|
|
FontSize="14"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<ComboBox ItemsSource="{Binding Countries}"
|
|
SelectedItem="{Binding SelectedCountry}"
|
|
Padding="12,10"
|
|
FontSize="14"
|
|
PlaceholderText="请选择国家"/>
|
|
</StackPanel>
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="城市 *"
|
|
FontSize="14"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<ComboBox ItemsSource="{Binding Cities}"
|
|
SelectedItem="{Binding SelectedCity}"
|
|
Padding="12,10"
|
|
FontSize="14"
|
|
PlaceholderText="请选择城市"/>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
|
|
<!-- 复选框字段（反馈表单） -->
|
|
<StackPanel Spacing="12" IsVisible="{Binding ShowCheckBoxFields}">
|
|
<CheckBox Content="我已阅读并同意服务条款 *"
|
|
IsChecked="{Binding AgreeTerms}"
|
|
FontSize="14"/>
|
|
<CheckBox Content="订阅邮件通知"
|
|
IsChecked="{Binding SubscribeNewsletter}"
|
|
FontSize="14"/>
|
|
<CheckBox Content="接收系统通知"
|
|
IsChecked="{Binding ReceiveNotifications}"
|
|
FontSize="14"/>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
|
|
<!-- 简洁表单：水平布局（标签和输入框在一行） -->
|
|
<StackPanel Spacing="16" IsVisible="{Binding UseHorizontalLayout}">
|
|
<!-- 姓名 -->
|
|
<Grid ColumnDefinitions="100,*" ColumnSpacing="12">
|
|
<TextBlock Grid.Column="0"
|
|
Text="姓名 *"
|
|
FontSize="14"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"
|
|
VerticalAlignment="Center"/>
|
|
<TextBox Grid.Column="1"
|
|
Text="{Binding Name}"
|
|
Watermark="请输入姓名"
|
|
Padding="12,10"
|
|
FontSize="14"/>
|
|
</Grid>
|
|
|
|
<!-- 邮箱 -->
|
|
<Grid ColumnDefinitions="100,*" ColumnSpacing="12">
|
|
<TextBlock Grid.Column="0"
|
|
Text="邮箱 *"
|
|
FontSize="14"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"
|
|
VerticalAlignment="Center"/>
|
|
<TextBox Grid.Column="1"
|
|
Text="{Binding Email}"
|
|
Watermark="请输入邮箱地址"
|
|
Padding="12,10"
|
|
FontSize="14"/>
|
|
</Grid>
|
|
</StackPanel>
|
|
|
|
<!-- 注册表单：两列布局 -->
|
|
<Grid ColumnDefinitions="*,*" ColumnSpacing="16" RowDefinitions="Auto,Auto,Auto,Auto"
|
|
IsVisible="{Binding UseTwoColumnLayout}">
|
|
<!-- 第一行：姓名 -->
|
|
<StackPanel Grid.Row="0" Grid.Column="0" Spacing="6">
|
|
<TextBlock Text="姓名 *"
|
|
FontSize="14"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<TextBox Text="{Binding Name}"
|
|
Watermark="请输入姓名"
|
|
Padding="12,10"
|
|
FontSize="14"/>
|
|
</StackPanel>
|
|
|
|
<!-- 第一行：邮箱 -->
|
|
<StackPanel Grid.Row="0" Grid.Column="1" Spacing="6">
|
|
<TextBlock Text="邮箱 *"
|
|
FontSize="14"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<TextBox Text="{Binding Email}"
|
|
Watermark="请输入邮箱地址"
|
|
Padding="12,10"
|
|
FontSize="14"/>
|
|
</StackPanel>
|
|
|
|
<!-- 第二行：电话 -->
|
|
<StackPanel Grid.Row="1" Grid.Column="0" Spacing="6">
|
|
<TextBlock Text="电话 *"
|
|
FontSize="14"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<TextBox Text="{Binding Phone}"
|
|
Watermark="请输入电话号码"
|
|
Padding="12,10"
|
|
FontSize="14"/>
|
|
</StackPanel>
|
|
|
|
<!-- 第二行：地址 -->
|
|
<StackPanel Grid.Row="1" Grid.Column="1" Spacing="6">
|
|
<TextBlock Text="地址 *"
|
|
FontSize="14"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<TextBox Text="{Binding Address}"
|
|
Watermark="请输入地址"
|
|
Padding="12,10"
|
|
FontSize="14"/>
|
|
</StackPanel>
|
|
</Grid>
|
|
</StackPanel>
|
|
|
|
<!-- 错误提示 -->
|
|
<Border Background="#FEE2E2"
|
|
BorderBrush="#FCA5A5"
|
|
BorderThickness="1"
|
|
CornerRadius="8"
|
|
Padding="12"
|
|
IsVisible="{Binding SubmitResult, Converter={x:Static converters:StringConverters.IsNotNullOrEmptyConverter}}">
|
|
<TextBlock Text="{Binding SubmitResult}"
|
|
Foreground="#DC2626"
|
|
TextWrapping="Wrap"
|
|
FontSize="13"/>
|
|
</Border>
|
|
|
|
<!-- 按钮 -->
|
|
<StackPanel Orientation="Horizontal"
|
|
HorizontalAlignment="Right"
|
|
Spacing="10">
|
|
<Button Content="取消"
|
|
MinWidth="96"
|
|
Command="{Binding CancelFormCommand}"/>
|
|
<Button Content="提交"
|
|
MinWidth="96"
|
|
Command="{Binding SubmitFormCommand}"
|
|
Background="#3B82F6"
|
|
Foreground="White"
|
|
BorderThickness="0"
|
|
CornerRadius="8"/>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
</Border>
|
|
</dialogHost:DialogHost.DialogContent>
|
|
|
|
<Grid RowDefinitions="Auto,Auto,*" ColumnDefinitions="*" Margin="20" Background="Transparent">
|
|
<!-- 标题区域 -->
|
|
<StackPanel Spacing="8">
|
|
<TextBlock Text="表单示例"
|
|
FontSize="20"
|
|
FontWeight="SemiBold"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<TextBlock Text="点击下方不同按钮打开不同类型的表单对话框，每种表单包含不同的字段组合。"
|
|
FontSize="14"
|
|
Foreground="{StaticResource SecondaryGrayDark}"/>
|
|
</StackPanel>
|
|
|
|
<!-- 按钮区域 -->
|
|
<WrapPanel Grid.Row="1"
|
|
Margin="0,18,0,0"
|
|
Orientation="Horizontal">
|
|
<Button Content="基础表单"
|
|
Padding="18,10"
|
|
Margin="0,0,12,12"
|
|
Command="{Binding ShowBasicFormCommand}"
|
|
Background="#3B82F6"
|
|
BorderBrush="Transparent"
|
|
Foreground="White"
|
|
CornerRadius="10">
|
|
<Button.Styles>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="#2563EB"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
</Button>
|
|
<Button Content="简洁表单"
|
|
Padding="18,10"
|
|
Margin="0,0,12,12"
|
|
Command="{Binding ShowSimpleFormCommand}"
|
|
Background="#10B981"
|
|
BorderBrush="Transparent"
|
|
Foreground="White"
|
|
CornerRadius="10">
|
|
<Button.Styles>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="#059669"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
</Button>
|
|
<Button Content="联系表单"
|
|
Padding="18,10"
|
|
Margin="0,0,12,12"
|
|
Command="{Binding ShowContactFormCommand}"
|
|
Background="#8B5CF6"
|
|
BorderBrush="Transparent"
|
|
Foreground="White"
|
|
CornerRadius="10">
|
|
<Button.Styles>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="#7C3AED"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
</Button>
|
|
<Button Content="反馈表单"
|
|
Padding="18,10"
|
|
Margin="0,0,12,12"
|
|
Command="{Binding ShowFeedbackFormCommand}"
|
|
Background="#F59E0B"
|
|
BorderBrush="Transparent"
|
|
Foreground="White"
|
|
CornerRadius="10">
|
|
<Button.Styles>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="#D97706"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
</Button>
|
|
<Button Content="注册表单"
|
|
Padding="18,10"
|
|
Margin="0,0,12,12"
|
|
Command="{Binding ShowRegisterFormCommand}"
|
|
Background="#EF4444"
|
|
BorderBrush="Transparent"
|
|
Foreground="White"
|
|
CornerRadius="10">
|
|
<Button.Styles>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="#DC2626"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
</Button>
|
|
</WrapPanel>
|
|
|
|
<!-- 结果显示区域 -->
|
|
<Border Grid.Row="2"
|
|
Margin="0,24,0,0"
|
|
Padding="16"
|
|
Background="{StaticResource BackgroundLight}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
CornerRadius="8">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="提交结果"
|
|
FontSize="16"
|
|
FontWeight="SemiBold"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<TextBlock Text="{Binding SubmitResult, FallbackValue=尚未提交任何数据}"
|
|
TextWrapping="Wrap"
|
|
Foreground="{StaticResource TextPrimary}"
|
|
FontSize="14"/>
|
|
</StackPanel>
|
|
</Border>
|
|
</Grid>
|
|
</dialogHost:DialogHost>
|
|
</reactive:ReactiveUserControl>
|
|
|
|
|