一个跨平台的`ChatGPT`悬浮窗工具

红豆沙

一个跨平台的ChatGPT悬浮窗工具

使用avalonia实现的ChatGPT的工具，设计成悬浮窗，并且支持插件。
如何实现悬浮窗？

在使用avalonia实现悬浮窗也是非常的简单的。
实现我们需要将窗体设置成无边框
在Window根节点添加一下属性，想要在Linux下生效请务必添加SystemDecorations属性

1. ExtendClientAreaToDecorationsHint="True"
2. ExtendClientAreaChromeHints="NoChrome"
3. ExtendClientAreaTitleBarHeightHint="-1"
4. SystemDecorations="None"

复制代码

这样我们的窗口就设置成了无边框。
然后我们还需要将窗体的大小固定，

1. Height="50"
2. MaxHeight="50"
3. Width="{Binding Width}"
4. MaxWidth="{Binding Width}"

复制代码

高度固定，宽度绑定到ViewModel的Width属性中，默认270，
接下来给出所有代码，

1. <Window xmlns="https://github.com/avaloniaui"
2.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3.         xmlns:vm="using:Gotrays.Suspension.Client.ViewModels"
4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6.         xmlns:valueConverter="clr-namespace:Gotrays.Suspension.Client.ValueConverter"
7.         xmlns:md="clr-namespace:Markdown.Avalonia;assembly=Markdown.Avalonia"
8.         xmlns:avedit="https://github.com/avaloniaui/avaloniaedit"
9.         xmlns:ctxt="clr-namespace:ColorTextBlock.Avalonia;assembly=ColorTextBlock.Avalonia"
10.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
11.         x:
12.         x:DataType="vm:MainWindowViewModel"
13.         ExtendClientAreaToDecorationsHint="True"
14.         ExtendClientAreaChromeHints="NoChrome"
15.         ExtendClientAreaTitleBarHeightHint="-1"
16.         SystemDecorations="None"
17.         WindowStartupLocation="CenterScreen"
18.         Height="50"
19.         MaxHeight="50"
20.         Width="{Binding Width}"
21.         MaxWidth="{Binding Width}"
22.         Icon="/Assets/ai.png"
23.         Title="Gotrays.Suspension.Client">
25.     <Window.Resources>
26.         <valueConverter:ImageConverter x:Key="ImageConverter" />
27.         <valueConverter:ChatToStyleConverter x:Key="ChatToStyleConverter" />
28.     </Window.Resources>
30.     <Design.DataContext>
31.         <vm:MainWindowViewModel />
32.     </Design.DataContext>
34.     <Window.Styles>
35.         
36.         
37.     </Window.Styles>
39.     <Border Name="MainBorder" CornerRadius="1000" Background="Black" Margin="0,0,0,0" Padding="0,0,0,0"
40.             HorizontalAlignment="Left" VerticalAlignment="Center" Width="100" Height="50">
41.         <Grid>
42.             
43.             <Image Source="../Assets/ai.png" Name="Logo" HorizontalAlignment="Left" VerticalAlignment="Center"
44.                    Width="46"
45.                    Tapped="Logo_OnTapped"
46.                    RenderOptions.BitmapInterpolationMode="HighQuality"
47.                    PointerPressed="OnLogoClick"
48.                    PointerEntered="Logo_OnPointerEntered"
49.                    PointerExited="Logo_OnPointerExited"
50.                    Height="46" Margin="0,0,0,0" />
52.             
53.             <Popup Name="ModulePopup" IsOpen="False" PlacementTarget="{Binding ElementName=MainBorder}"
54.                    PlacementMode="Top">
55.                 <StackPanel Margin="5">
56.                     <Border Background="#1F1F1F" BorderBrush="Black" BorderThickness="1" CornerRadius="12"
57.                             MaxHeight="400" Width="120">
58.                         <ScrollViewer Name="ModuleScrollViewer" VerticalScrollBarVisibility="Auto">
59.                             <ItemsControl CornerRadius="12" ItemsSource="{Binding Modules}" Margin="2">
60.                                 <ItemsControl.ItemTemplate>
61.                                     <DataTemplate>
62.                                         <Border Margin="5"
63.                                                 Background="{Binding Color}"
64.                                                 PointerExited="OnSelectStackPointerExited"
65.                                                 PointerEntered="OnSelectStackPointerEntered"
66.                                                 PointerPressed="OnSelectStackPointerPressed"
67.                                                 Tag="{Binding GetThis}"
68.                                                 CornerRadius="8">
69.                                             
70.                                             <StackPanel Orientation="Horizontal">
71.                                                 <Image
72.                                                     RenderOptions.BitmapInterpolationMode="HighQuality"
73.                                                     Source="{Binding Icon, Converter={StaticResource ImageConverter}}"
74.                                                     HorizontalAlignment="Left"
75.                                                     Width="20"
76.                                                     Height="20" />
77.                                                 <TextBlock TextWrapping="Wrap" Width="60" Text="{Binding Title}"
78.                                                            Margin="5" Foreground="White" />
79.                                             </StackPanel>
80.                                         </Border>
81.                                     </DataTemplate>
82.                                 </ItemsControl.ItemTemplate>
83.                             </ItemsControl>
84.                         </ScrollViewer>
85.                     </Border>
86.                 </StackPanel>
87.             </Popup>
89.             
90.             <Border PointerPressed="SearchBorder_OnPointerPressed"
91.                     PointerEntered="searchBorder_PointerEnter"
92.                     PointerExited="OnPointerExited"
93.                     Name="searchBorder"
94.                     CornerRadius="1000" Background="#000000" BorderBrush="#FFFFFF"
95.                     BorderThickness="1" Margin="50,0,0,0" Padding="0,0,0,0" HorizontalAlignment="Left"
96.                     VerticalAlignment="Center" Width="46" Height="46" Cursor="Hand">
97.                 <Image Source="../Assets/search.png"
98.                        RenderOptions.BitmapInterpolationMode="HighQuality"
99.                        HorizontalAlignment="Center" VerticalAlignment="Center"
100.                        Width="20" Height="20" Margin="0,0,0,0" />
101.             </Border>
103.             
104.             <TextBox FontSize="20" Name="SearchText" Margin="50,0,0,0" IsVisible="False" Width="0" Height="40"
105.                      HorizontalAlignment="Left" VerticalAlignment="Center">
106.                 <TextBox.Styles>
107.                     
108.                     </Styles>
109.                 </TextBox.Styles>
110.                 <TextBox.Transitions>
111.                     <Transitions>
112.                         <DoubleTransition Property="Width" Duration="0:0:0.1" />
113.                     </Transitions>
114.                 </TextBox.Transitions>
115.             </TextBox>
116.             
117.             <Popup x:Name="MessagePopup"
118.                    IsOpen="False"
119.                    PlacementTarget="{Binding ElementName=MainBorder}"
120.                    PlacementMode="Bottom">
121.                 <StackPanel
122.                     PointerEntered="MessagePopup_OnPointerEntered"
123.                     PointerExited="MessagePopup_OnPointerExited" Margin="5">
124.                     <Border Name="MessageBorder"
125.                             Background="#1F1F1F"
126.                             BorderBrush="Black"
127.                             BorderThickness="1"
128.                             CornerRadius="12"
129.                             MaxHeight="300">
130.                         <ScrollViewer Name="ScrollViewer" VerticalScrollBarVisibility="Auto">
131.                             <ItemsControl ItemsSource="{Binding Messages}" CornerRadius="12" Margin="2">
132.                                 <ItemsControl.ItemTemplate>
133.                                     <DataTemplate>
134.                                         <StackPanel Margin="5">
135.                                             <StackPanel.Resources>
136.                                                 <valueConverter:ChatToBackgroundConverter
137.                                                     x:Key="ChatToBackgroundConverter" />
138.                                             </StackPanel.Resources>
139.                                             <Border
140.                                                 Background="{Binding Chat, Converter={StaticResource ChatToBackgroundConverter}}"
141.                                                 CornerRadius="5">
143.                                                 <md:MarkdownScrollViewer
144.                                                     VerticalAlignment="Stretch"
145.                                                     MarkdownStyleName="Standard"
146.                                                     SaveScrollValueWhenContentUpdated="True"
147.                                                     Markdown="{Binding Message}">
148.                                                     <md:MarkdownScrollViewer.Styles>
150.                                                         
152.                                                         
154.                                                         
156.                                                         
158.                                                     </md:MarkdownScrollViewer.Styles>
159.                                                 </md:MarkdownScrollViewer>
160.                                             </Border>
161.                                         </StackPanel>
162.                                     </DataTemplate>
163.                                 </ItemsControl.ItemTemplate>
164.                             </ItemsControl>
165.                         </ScrollViewer>
166.                     </Border>
167.                 </StackPanel>
168.             </Popup>
170.         </Grid>
171.         <Border.Transitions>
172.             <Transitions>
173.                 <DoubleTransition Property="Width" Duration="0:0:0.2" />
174.             </Transitions>
175.         </Border.Transitions>
176.     </Border>
178. </Window>

复制代码

只需要设置无边框并且固定大小。悬浮窗的效果就达到了。
我们看看执行效果

<img alt="image-20230702133719931" loading="lazy">

就这样简单的悬浮窗写好了，我们使用一下悬浮窗的搜索功能

<img alt="image-20230702133757221" loading="lazy">

这个就是简单的使用效果，对比其他的工具，这个悬浮窗更简洁，并且跨平台和开源。

<img alt="image-20230702133839454" loading="lazy">

目前的项目结构。
plugin下面的项目是默认的插件，用于搜索系统文件（未完善）
Gotrays.Suspension.Client则是实际的客户端。
Gotrays.Suspension.PlugIn则是插件定义的接口规范。
Gotrays.Update则是检查更新程序，用于更新主程序。
实现插件

plug-in

插件模块，用于扩展功能。
插件开发

1. 创建插件项目

在解决方案中创建一个类库项目，项目名称以Gotrays.Suspension.PlugIn.开头，例如Gotrays.Suspension.PlugIn.Test。
然后在项目中依赖Gotrays.Suspension.PlugIn类库。
2. 创建插件类

在项目中创建一个类，继承Gotrays.Suspension.PlugIn.PlugInBase类，例如：

1. using Gotrays.Suspension.PlugIn;
3. public class SystemTools : PlugInBase
4. {
5.     public SystemTools()
6.     {
7.         Name = "系统搜索";
9. ​        // 获取system.png嵌入资源的Stream
10. ​        var stream = GetType().Assembly.GetManifestResourceStream("SystemTools.system.png");
11. ​        if (stream == null) return;
13. ​        // 读取Stream到byte数组
14. ​        var bytes = new byte[stream.Length];
15. ​        var read = stream.Read(bytes, 0, bytes.Length);
16. ​        Icon = bytes;
17. ​    }
19. ​    // 搜索触发
20. ​    public override async Task SearchAsync(string value)
21. ​    {
22. ​        // 打开系统搜索
23. ​        Process.Start("explorer.exe", "search://" + value);
25. ​        await Task.CompletedTask;
26. ​    }
27. ​   
28. ​    protected override async Task InitAsync(IServiceCollection services){
29. ​        // 插件首次加载时执行
30. ​    }
31. ​    public override async Task BuilderServiceAsync(IServiceProvider provider)
32. ​    {
33. ​        // 这里可以得到服务提供者，可以通过服务提供者获取其他服务
34. ​    }
35. ​    protected override void Selection()
36. ​    {
37. ​        //  当插件被选中时执行
38. ​    }
39. ​   
40. ​    protected override void UnSelection()
41. ​    {
42. ​        // 当插件被取消选中时执行
43. ​    }
44. ​   
45. ​    protected override async Task UnloadAsync()
46. ​    {
47. ​        // 当插件被卸载插件发生
48. ​    }
49. ​   
50. }

复制代码

工具服务会进行自动发现，无需手动注册。
只需要将程序集放置在./plug-in目录下即可。
服务会在一个程序集中发现所有的插件类，并且进行注册。
按照上面的方式非常的简单就集成了插件。
开源地址

Gitee：https://gitee.com/gotrays/gotrays-suspension
Github:https://github.com/239573049/Suspension
技术交流群：737776595

来源:https://www.cnblogs.com/hejiale010426/archive/2023/07/02/17520719.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！