acetaffy/BmsMonitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refine Taffy visual identity

Browse Source
This commit is contained in:
acetaffy
2026-09-23 16:29:55 +08:00
parent a14b1218a3
commit f38af6a311
2 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
BmsMonitor.App/MainWindow.xaml
+21 -13
View File
@@ -125,8 +125,10 @@
</Window.Resources> </Window.Resources>
<Grid Background="#F3F2F6" ClipToBounds="True"> <Grid Background="#F3F2F6" ClipToBounds="True">
<Image Source="Assets/taffy-visual.jpg" Stretch="UniformToFill" Opacity="0.11"/> <Image Source="Assets/taffy-visual.jpg" Stretch="UniformToFill" Opacity="0.20"/>
<Rectangle Fill="#99F8F5F9"/> <Rectangle Fill="#55F8F5F9"/>
<TextBlock Text="TAFFY" FontSize="180" FontWeight="Black" Foreground="#0FE8589C"
HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,22,-42"/>
<Grid Margin="14"> <Grid Margin="14">
<Grid.RowDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/>
@@ -144,16 +146,16 @@
</Border.Background> </Border.Background>
<Grid> <Grid>
<Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions> <Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions>
<Image Grid.Column="2" Grid.ColumnSpan="2" Source="Assets/taffy-visual.jpg" Width="420" Stretch="UniformToFill" HorizontalAlignment="Right" Opacity="0.16" Margin="0,-80,-12,-80"/> <Image Grid.Column="2" Grid.ColumnSpan="2" Source="Assets/taffy-visual.jpg" Width="460" Stretch="UniformToFill" HorizontalAlignment="Right" Opacity="0.24" Margin="0,-90,-12,-90"/>
<Ellipse Grid.Column="0" Width="54" Height="54" Stroke="#FFFFFFFF" StrokeThickness="3" Margin="0,0,12,0"> <Ellipse Grid.Column="0" Width="64" Height="64" Stroke="#FFFFFFFF" StrokeThickness="3" Margin="0,0,12,0">
<Ellipse.Fill><ImageBrush ImageSource="Assets/taffy-avatar.jpg" Stretch="UniformToFill"/></Ellipse.Fill> <Ellipse.Fill><ImageBrush ImageSource="Assets/taffy-avatar.jpg" Stretch="UniformToFill"/></Ellipse.Fill>
</Ellipse> </Ellipse>
<StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="0,0,22,0"> <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="0,0,22,0">
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<TextBlock Text="BMS Monitor" FontSize="21" FontWeight="Bold" Foreground="#6C3556"/> <TextBlock Text="永雏塔菲" FontSize="22" FontWeight="Bold" Foreground="#6C3556"/>
<Border Background="#FFE8589C" CornerRadius="3" Padding="7,2" Margin="8,1,0,0"><TextBlock Text="TAFFY" FontSize="10" FontWeight="Bold" Foreground="White"/></Border> <Border Background="#FFE8589C" CornerRadius="3" Padding="7,2" Margin="8,1,0,0"><TextBlock Text="BMS" FontSize="10" FontWeight="Bold" Foreground="White"/></Border>
</StackPanel> </StackPanel>
<TextBlock Text="♡ 永雏塔菲主题 · 电池状态看板 ✦" FontSize="12" Foreground="#A24476" Margin="0,3,0,0"/> <TextBlock Text="TAFFY · BATTERY MONITOR" FontSize="12" FontWeight="SemiBold" Foreground="#A24476" Margin="0,3,0,0"/>
</StackPanel> </StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Center"> <StackPanel Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="设备" VerticalAlignment="Center" Foreground="#5D5365"/> <TextBlock Text="设备" VerticalAlignment="Center" Foreground="#5D5365"/>
@@ -177,13 +179,19 @@
<TabItem Header="♡ 概览"> <TabItem Header="♡ 概览">
<ScrollViewer VerticalScrollBarVisibility="Auto"> <ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Margin="0,2,0,10"> <StackPanel Margin="0,2,0,10">
<Border Height="88" CornerRadius="5" BorderBrush="#FFE4B5D0" BorderThickness="1" Margin="4,0,4,5" ClipToBounds="True"> <Border Height="108" CornerRadius="5" BorderBrush="#FFE4B5D0" BorderThickness="1" Margin="4,0,4,5" ClipToBounds="True">
<Grid> <Grid>
<Image Source="Assets/taffy-visual.jpg" Stretch="UniformToFill" Opacity="0.42"/> <Image Source="Assets/taffy-visual.jpg" Stretch="UniformToFill" Opacity="0.56"/>
<Rectangle><Rectangle.Fill><LinearGradientBrush StartPoint="0,0" EndPoint="1,0"><GradientStop Color="#FFFDF6FA" Offset="0"/><GradientStop Color="#F5FDF6FA" Offset="0.45"/><GradientStop Color="#30FFFFFF" Offset="1"/></LinearGradientBrush></Rectangle.Fill></Rectangle> <Rectangle><Rectangle.Fill><LinearGradientBrush StartPoint="0,0" EndPoint="1,0"><GradientStop Color="#FFFDF6FA" Offset="0"/><GradientStop Color="#EEFDF6FA" Offset="0.48"/><GradientStop Color="#18FFFFFF" Offset="1"/></LinearGradientBrush></Rectangle.Fill></Rectangle>
<StackPanel VerticalAlignment="Center" Margin="20,0"> <Border Width="6" Background="#FFE8589C" HorizontalAlignment="Left" Margin="0,14" CornerRadius="0,3,3,0"/>
<TextBlock Text="TAFFY BATTERY STATUS" FontSize="18" FontWeight="Bold" Foreground="#753A61"/> <StackPanel VerticalAlignment="Center" Margin="24,0">
<TextBlock Text="✦ 连接 CAN 后，塔菲会在这里陪你看电池状态喵 ♡" FontSize="13" Foreground="#A24D7D" Margin="0,5,0,0"/> <TextBlock Text="永雏塔菲 · BMS STATUS" FontSize="20" FontWeight="Bold" Foreground="#753A61"/>
<TextBlock Text="CAN 实时电池状态监控" FontSize="13" Foreground="#A24D7D" Margin="0,5,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,16,10">
<Rectangle Width="11" Height="11" Fill="#E8589C" RenderTransformOrigin="0.5,0.5"><Rectangle.RenderTransform><RotateTransform Angle="45"/></Rectangle.RenderTransform></Rectangle>
<Rectangle Width="11" Height="11" Fill="#7653A6" Margin="9,0,0,0" RenderTransformOrigin="0.5,0.5"><Rectangle.RenderTransform><RotateTransform Angle="45"/></Rectangle.RenderTransform></Rectangle>
<Rectangle Width="11" Height="11" Fill="#F3A8CA" Margin="9,0,0,0" RenderTransformOrigin="0.5,0.5"><Rectangle.RenderTransform><RotateTransform Angle="45"/></Rectangle.RenderTransform></Rectangle>
</StackPanel> </StackPanel>
</Grid> </Grid>
</Border> </Border>
README.md
+1 -1
View File
@@ -141,7 +141,7 @@ CAN 通信层
## 界面主题 ## 界面主题
界面采用 CrystalDiskInfo 式的紧凑信息布局，并融入永雏塔菲的粉紫配色、头像、低透明度全窗背景、主题视觉与桃心/星星状态元素。总电流与电压、SOC 等核心数据集中在概览页。主题图片取自[永雏塔菲的哔哩哔哩官方空间](https://space.bilibili.com/1265680561)。 界面采用 CrystalDiskInfo 式的紧凑信息布局，并通过永雏塔菲头像、立绘、低透明度全窗背景、粉紫撞色及菱格视觉元素强化主题识别。总电流与电压、SOC 等核心数据集中在概览页。主题图片取自[永雏塔菲的哔哩哔哩官方空间](https://space.bilibili.com/1265680561)。
## 使用 ## 使用