up 调整说明与示例

Author: Coloryr

README.md

@@ -69,10 +69,11 @@
 前往[API版本说明](./api.md)
 
 ## 项目说明
-- ColorDesktop.Api 插件接口
-- ColorDesktop.Debug 调试用
+- ColorDesktop.Api 组件接口
+- ColorDesktop.Debug 调试用，用于预览组件显示实例
 - ColorDesktop.Launcher 程序本体
-- ColorDesktop.PluginList 插件源生成器
+- ColorDesktop.PluginList 组件json源生成器，发布组件的时候用
+- ColorDesktop.WebApi 浏览器组件接口
 
 ## 依赖/引用的项目
 [AvaloniaUI](https://github.com/AvaloniaUI/Avalonia) 跨平台UI框架  
@@ -86,7 +87,7 @@
 ## 组件依赖/引用的项目
 [LibreHardwareMonitor](https://github.com/LibreHardwareMonitor/LibreHardwareMonitor) 传感器读取  
 [lunar-csharp](https://github.com/6tail/lunar-csharp) 农历节气天干地支等计算  
-[Live2DCSharpSDK](https://github.com/Coloryr/Live2DCSharpSDK) Live2D显示  
+~~[Live2DCSharpSDK](https://github.com/Coloryr/Live2DCSharpSDK) Live2D显示~~  
 [MinecraftSkinRender](https://github.com/Coloryr/MinecraftSkinRender) Minecraft皮肤渲染器
 
 ## 开源协议

dev.md

@@ -1,5 +1,7 @@
 # 组件开发指南
 
+这个是C#组件开发指南，[前往浏览器组件](./web.md)
+
 在开发组件之前，你需要有以下知识
 - [C# 12](https://learn.microsoft.com/zh-cn/dotnet/csharp/)
 - [axaml](https://docs.avaloniaui.net/docs/basics/user-interface/introduction-to-xaml)
@@ -24,6 +26,37 @@ dotnet build
 
 此时，会构建到`./src/build_out/Debug/net8.0`，你可以在这里面找到`ColorDesktop.Launcher.exe`
 
+然后是组件引用`ColorDesktop.Api`，有两种方式实现
+
+- 使用源码的方式引用API  
+1. 打开`ColorDesktop.sln`，在里面新建你的组件项目  
+2. 修改`ColorDesktop.Debug`，并引用你的组件项目，
+3. 修改`ColorDesktop.Debug`的`Program`函数`BuildAvaloniaApp`，在里面添加你的组件
+```c#
+new AnalogClockPlugin.AnalogClockPlugin().LoadLang(LanguageType.zh_cn);
+```
+你的组件类可能，没有，你可以后面再回来加，如果不加上会导致语言加载错误
+
+- 使用Nuget包方式引用API  
+1. 创建一个C# 类库工程
+2. 安装[nuget包`ColorDesktop.Api`](https://www.nuget.org/packages/ColorDesktop.Api)  
+3. 创建一个Avalonia项目，同时引用你的类库工程
+4. 删除里面的所有`PackageReference`引用`Avalonia`项，例如
+```xml
+<!-- 这些全部删掉 -->
+<PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
+<PackageReference Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
+<!-- 等... -->
+```
+5. 修改控制台应用的`Program`函数`BuildAvaloniaApp`，在里面添加你的组件
+```c#
+new AnalogClockPlugin.AnalogClockPlugin().LoadLang(LanguageType.zh_cn);
+```
+你的组件类可能，没有，你可以后面再回来加，如果不加上会导致语言加载错误
+
+完成以上操作后，就可以开始开发组件了，同时若VS装上了`Avalonia预览插件`，也可以预览你的UI了  
+**注意，如果使用nuget方式，则在预览中不会使用ColorDesktop的样式，但是组件加载后会使用**
+
 ## 组件与显示实例概念
 
 `组件`是软件的附属，组件里面有用于操作与显示的内容  
@@ -82,6 +115,7 @@ dotnet build
     //组件作者
     "Auther": "Coloryr",
     //组件程序集，就是dll的名字，在这里可以添加你的依赖库等
+    //这个列表里面是最先加载的，若你的运行库很多，可以不写，会后面自动加载
     "Dlls": [
         "ColorDesktop.AnalogClockPlugin" 
     ],
@@ -113,7 +147,7 @@ dotnet build
     "ApiVersion": "4"
 }
 ```
-然后设置编译后复制
+然后设置编译后设置`编译后复制`，或者在工程内加入这段
 ```xml
 <ItemGroup>
 	<None Update="plugin.json">
@@ -122,19 +156,18 @@ dotnet build
 </ItemGroup>
 ```
 
-编写组件主入口类，需要实现接口[ColorDesktop.Api.IPlugin](./src/ColorDesktop.Api/IPlugin.cs)
+然后编写组件主入口类，需要实现接口[ColorDesktop.Api.IPlugin](./src/ColorDesktop.Api/IPlugin.cs)  
+然后编写显示实例，需要实现接口[ColorDesktop.Api.IInstance](./src/ColorDesktop.Api/IInstance.cs)
 
-编写显示实例，需要实现接口[ColorDesktop.Api.IInstance](./src/ColorDesktop.Api/IInstance.cs)
-
-组件生命周期  
+## 组件生命周期  
 ![](./pic/pic8.png)  
 组件相关的生命周期有四个函数  
 - Init 只在组件初始化时调用，整个生命周期只会调用一次
 - Enable 组件启用时调用，会多次调用，在[组件管理](./README.md#组件管理)界面下的`启用组件`就会调用这个
 - Disable 组件卸载时调用，会多次调用，在[组件管理](./README.md#组件管理)界面下的`禁用组件`就会调用这个
 - Stop 组件关闭时调用，整个生命周期只会调用一次，调用后组件会被卸载
 
-显示实例生命周期  
+## 显示实例生命周期  
 ![](./pic/pic9.png)  
 显示实例相关的生命周期有五个函数  
 - CreateView 只会调用一次，需要返回一个Avalonia的Control，及显示内容
@@ -161,11 +194,6 @@ return new InstanceDataObj()
 
 更多具体内容可以参考[示例插件](./src/Plugins/ColorDesktop.ClockPlugin/ClockPlugin.cs)和[示例显示实例](./src/Plugins/ColorDesktop.ClockPlugin/ClockControl.axaml.cs)
 
-## 预览
-
-如果你使用了VS2022，并安装了Avalonia插件，但是无法预览页面  
-此时你需要将[ColorDesktop.Debug](./src/ColorDesktop.Debug/ColorDesktop.Debug.csproj)引入到你的解决方案中，添加你的组件为依赖项目，然后编译，选择启动项为`ColorDesktop.Debug`即可
-
 ## 组件公共API
 
 在类`ColorDesktop.Api.LauncherApi`里面可以获取一些用于操作的API
@@ -209,7 +237,8 @@ public static void CallEvent(BaseEvent pluginEvent);
 
 ## CoreLib
 这个是`ColorDesktop.CoreLib`组件  
-主要是用于将重复代码抽出来弄成一个组件方便其他组件调用
+主要是用于将重复代码抽出来弄成一个组件方便其他组件调用  
+~~这里是Coloryr组件用的CoreLib，你可以自己去写一个~~
 
 使用前需要将其以共享的方式作为依赖
 ```json

src/ColorDesktop.WebApi/README.md

@@ -0,0 +1 @@
+ColorDesktop WebPlugin Api

src/ColorDesktop.WebApi/package.json

@@ -1,11 +1,12 @@
 {
   "name": "colordesktop-webapi",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean",
     "link": "link"
   },
+  "keywords": ["colordesktop", "api", "coloryr"],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "author": "coloryr",

src/Demo/PluginDemo/DemoControl.axaml

@@ -3,17 +3,16 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:lang="clr-namespace:ColorDesktop.Api;assembly=ColorDesktop.Api"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:model="clr-namespace:PluginDemo;assembly=PluginDemo"
-    d:DesignHeight="450"
-    d:DesignWidth="800"
     x:DataType="model:DemoModel"
     mc:Ignorable="d">
     <StackPanel
         HorizontalAlignment="Center"
         VerticalAlignment="Center"
         Background="White">
         <TextBlock Text="{Binding Text}" />
-        <Button Command="{Binding Click}" Content="Click Me!" />
+        <Button Command="{Binding Click}" Content="{lang:Localize DemoPlugin.Text1}" />
     </StackPanel>
 </UserControl>

src/Demo/PluginDemo/DemoInstanceSettingControl.axaml

@@ -3,11 +3,13 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:lang="clr-namespace:ColorDesktop.Api;assembly=ColorDesktop.Api"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:model="clr-namespace:PluginDemo;assembly=PluginDemo"
-    d:DesignHeight="450"
-    d:DesignWidth="800"
     x:DataType="model:DemoInstanceSettingModel"
     mc:Ignorable="d">
-    <TextBox Text="{Binding Text}" />
+    <StackPanel>
+        <TextBlock Text="{lang:Localize DemoPlugin.Text2}" />
+        <TextBox Text="{Binding Text}" />
+    </StackPanel>
 </UserControl>

src/Demo/PluginDemo/DemoPlugin.cs

@@ -1,4 +1,5 @@
-using Avalonia.Controls;
+using System.Reflection;
+using Avalonia.Controls;
 using ColorDesktop.Api;
 using ColorDesktop.Api.Objs;
 
@@ -132,7 +133,19 @@ public void Init(string local, string instancelocal)
 
     public void LoadLang(LanguageType type)
     {
-
+        var assm = Assembly.GetExecutingAssembly();
+        if (assm == null)
+        {
+            return;
+        }
+        string name = type switch
+        {
+            LanguageType.en_us => "PluginDemo.Resource.Lang.en-us.json",
+            _ => "PluginDemo.Resource.Lang.zh-cn.json"
+        };
+        using var item = assm.GetManifestResourceStream(name)!;
+        using var reader = new StreamReader(item);
+        LangApi.AddLangs(reader.ReadToEnd());
     }
 
     public IInstance MakeInstances(InstanceDataObj obj)

src/Demo/PluginDemo/DemoSettingControl.axaml

@@ -3,11 +3,13 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:lang="clr-namespace:ColorDesktop.Api;assembly=ColorDesktop.Api"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:model="clr-namespace:PluginDemo;assembly=PluginDemo"
-    d:DesignHeight="450"
-    d:DesignWidth="800"
     x:DataType="model:DemoSettingModel"
     mc:Ignorable="d">
-    <TextBox Text="{Binding Text}" />
+    <StackPanel>
+        <TextBlock Text="{lang:Localize DemoPlugin.Text2}" />
+        <TextBox Text="{Binding Text}" />
+    </StackPanel>
 </UserControl>

src/Demo/PluginDemo/Resource/Lang/en-us.json

@@ -0,0 +1 @@
+{}

src/Demo/PluginDemo/Resource/Lang/zh-cn.json

@@ -0,0 +1,5 @@
+{
+    "DemoPlugin.Name": "模拟时钟",
+    "DemoPlugin.Text1": "点击我",
+    "DemoPlugin.Text2": "设置显示文本"
+}