ToB企服应用市场:ToB评测及商务社交产业平台

标题: 一个跨平台的`ChatGPT`悬浮窗工具 [打印本页]
作者: 缠丝猫    时间: 2023-7-2 17:19
标题: 一个跨平台的`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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4