使用 ElementUI 组件构建 Window 桌面应用探索与实践（WPF）

Tip: Beginners mind

Remember the days were you were a beginner. Or memorize, if you still are one. You have never learned enough. Think of yourself as you were a beginner, every day. Always try to see technologies from a beginners mind. You can accept corrections to your software better and leave the standard path if you need it more easily. There are some good ideas even from people who don’t have your experience.

零、实现原理与应用案例设计

1、原理

基础实例 Demo 可以参照以下这篇博文，

基于.Net CEF 实现 Vue 等前端技术栈构建 Windows 窗体应用-CSDN博客文章浏览阅读389次。基于 .Net CEF 库，能够使用 Vue 等前端技术栈构建 Windows 窗体应用https://blog.csdn.net/weixin_47560078/article/details/133974513?spm=1001.2014.3001.5501原理非常简单，基于 .Net CEF 实现，用到的库为 CefSharp。

2、优势

1. 可以使用Vue/React等前端技术美化页面，提升用户友好度
2. 可以调度操作系统资源，例如打印机，命令行，文件
3. 前后端开发可以并行

3、劣势

1. 损失部分性能，占用系统资源更高
2. 调试需要前后端分开调试，对开发人员要求高，需要懂前后端技术栈
3. 非跨平台，仅支持Window

4、应用案例

从 Sqlite 数据库中加载数据，并渲染到前端，使用 Echart 进行可视化。

5、技术栈

Vite + Vue3 + TS + Echarts 5.4.3 + ElementUI(plus) + .NET Framework 4.7.2，开发环境为 Win10，VS2019，VS Code。 

6、开发流程

1. 整合 Vue + Vite + ElementUI +Echarts
2. 把 JS 需要调用的 .Net 方法临时用 JS 方法代替
3. 页面开发完毕，接着开发 .Net 方法，业务处理逻辑
4. 导出 .Net 方法，临时 JS 方法替换为真正的 .Net 方法
5. 最后发布测试

一、前端设计与实现

1、整合 Vue + Vite + ElementUI

# 创建 vite vue
cnpm create vite@latest

# element-plus 国内镜像 https://element-plus.gitee.io/zh-CN/
# 安装 element-plus
cnpm install element-plus --save

按需引入 element plus，

# 安装导入插件
cnpm install -D unplugin-vue-components unplugin-auto-import

在 main.ts 引入 element-plus 和样式，

// app\src\main.ts
import { createApp } from 'vue'
//import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
createApp(App).use(ElementPlus).mount('#app')

配置 vite，

// app\vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

2、使用图标 Icon

 cnpm install @element-plus/icons-vue

3、使用 ECharts

cnpm install echarts

折线图示例，

// src\components\MyChart.vue

效果，

4、页签显示

MyChart 页面使用页签切换不同的图表，不同的图表封装为单独的一个组件，由 MyChart 页面按需引入，

// src\components\MyChart.vue

// src\components\MyPictorialBar.vue

    

    

    

// src\components\MyStackedLine.vue

  

  

  

5、导出图片

echarts 官方提供了五个工具，但是导出图片在 CEF 中是不可用的，其他工具都能正常使用，因此需要重写导出图片方法，思路如下：

1、前端获取 echarts 的图表 canvas

2、将 canvas 转为 Base64 字符串传给 .NET 方法

3、C# 解析 Base64 保存为图片

  toolbox: {
    feature: {
      // saveAsImage: {},
      myTool1: {
        show: true,
        title: 'saveAsImage',
        icon: 'path://M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64v450.304z',
        onclick: function () {
          saveChartAsImage();
        }
      },
      restore: {},
      dataView: {},
      dataZoom: {},
    }
  },

// 手动触发保存图像
const saveChartAsImage = () => {
  console.log(myChart.getDataURL());
}

注意，这里 canvas 有一个跨域访问的问题，需要配置服务端允许跨域访问，否则会报错，

// InitCefSettings 允许跨域访问
settings.CefCommandLineArgs.Add("disable-web-security");

6、Vite 配置 ESLint

# 安装 eslint
cnpm i -D eslint @babel/eslint-parser
# 初始化配置
npx eslint --init
# 安装依赖
cnpm i @typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
# 安装插件
cnpm i -D vite-plugin-eslint

配置 vite，

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    //  ESLint 插件配置
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
    }),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

配置 eslint 规则，

// .eslintrc.cjs
module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-essential"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "vue"
    ],
    "rules": {
        "@typescript-eslint/no-explicit-any": 1,
        "no-console": 1,
        "no-debugger": 1,
        "no-undefined": 1,
        "no-undef":1,
    }
}

补充：打包时需要修改 build 指令，

7、API 封装

调用 .NET exportSeriesData 方法获取图表数据，

// src\api\DataUtil.ts

export const exportSeriesData = async (): Promise => {
    await CefSharp.BindObjectAsync("exportDataUtil")
    return exportDataUtil.exportSeriesData()
}

调用 .NET saveAsImage 方法获取将 Base64 字符保存为图片，

// src\api\ImageUtil.ts
export const SaveAsImage = async (data:string): Promise => {
    await CefSharp.BindObjectAsync("imageUtil")
    return imageUtil.saveAsImage(data)
}

二、后端设计与实现

1、新建 WPF 项目

项目的初始化结构非常简单，与 WinForm 项目结构相似，App.xaml 是程式的主入口，MainWindow.xaml 是自定义窗口，App.xaml.cs(WPF) 与 Program.cs(WinForm) 相似，MainWindow(WPF) 与 Form1(相似)。

2、安装 CefSharp 程序包

CefSharp.Wpf

3、添加 ChromiumWebBrowser 

可以直接在 MainWindow.xaml 中添加，

// MainWindow.xaml

    
        
        
        
            
        
    

也可以通过控件添加，

// MainWindow.xaml

    
        
    

// CefWpfApp\MainWindow.xaml.cs
using CefSharp;
using CefSharp.JavascriptBinding;
using CefSharp.Wpf;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace CefWpfApp
{
    
    /// 

    /// MainWindow.xaml 的交互逻辑
    /// 
    public partial class MainWindow : Window
    {
      
        /// 

        /// ChromiumWebBrowser
        /// 
        private static ChromiumWebBrowser browser;

        public MainWindow()
        {
            InitializeComponent();
            AddChromiumWebBrowser();
        }

        /// 

        /// Create a new instance in code or add via the designer
        /// 
        private void AddChromiumWebBrowser()
        {
            browser = new ChromiumWebBrowser("http://wpf.test");
            this.grid.Children.Add(browser);

        }
    }
}

效果，

4、异步 UI 线程封装

using System;
using System.Windows.Threading;

namespace CefWpfApp.Dispatchers
{
    public static class DispatcherExtensions
    {
        /// 

        /// Executes the Action asynchronously on the UI thread, does not block execution on the calling thread.
        /// 
        /// the dispatcher for which the update is required
        /// action to be performed on the dispatcher
        public static void InvokeOnUiThreadIfRequired(this Dispatcher dispatcher, Action action)
        {
            if (dispatcher.CheckAccess())
            {
                action.Invoke();
            }
            else
            {
                dispatcher.BeginInvoke(action);
            }
        }
    }
}

5、自定义 logo

直接在项目属性中配置，或者在 MainWindow 中使用 Icon 属性，

6、配置右键菜单

        /// 

        /// 自定义右键菜单
        /// 
        public class CustomContextMenuHandler : IContextMenuHandler
        {
            /// 

            /// 上下文菜单列表，在这里加菜单
            /// 
            /// 
            /// 
            /// 
            /// 
            /// 
            void IContextMenuHandler.OnBeforeContextMenu(IWebBrowser chromiumWebBrowser, IBrowser browser, IFrame frame, IContextMenuParams parameters, IMenuModel model)
            {
                if (model.Count > 0)
                {
                    // 添加分隔符
                    model.AddSeparator();
                }
                model.AddItem((CefMenuCommand)29501, "Show DevTools");
            }

            /// 

            /// 上下文菜单指令，这里实现菜单要做的事情
            /// 
            /// 
            /// 
            /// 
            /// 
            /// 
            /// 
            /// 
            bool IContextMenuHandler.OnContextMenuCommand(IWebBrowser chromiumWebBrowser, IBrowser browser, IFrame frame, IContextMenuParams parameters, CefMenuCommand commandId, CefEventFlags eventFlags)
            {
                if (commandId == (CefMenuCommand)29501)
                {
                    browser.GetHost().ShowDevTools();
                    return true;
                }
                return false;
            }

            void IContextMenuHandler.OnContextMenuDismissed(IWebBrowser chromiumWebBrowser, IBrowser browser, IFrame frame)
            {

            }

            bool IContextMenuHandler.RunContextMenu(IWebBrowser chromiumWebBrowser, IBrowser browser, IFrame frame, IContextMenuParams parameters, IMenuModel model, IRunContextMenuCallback callback)
            {
                // 必须返回 false
                return false;
            }
        }

        /// 

        /// Create a new instance in code or add via the designer
        /// 
        private void AddChromiumWebBrowser()
        {
            browser = new ChromiumWebBrowser("http://wpf.test");
            // 配置右键菜单
            browser.MenuHandler = new CustomContextMenuHandler();
            this.grid.Children.Add(browser);
        }

7、启动屏幕界面

直接引入图片，并将文件的属性设置为 “SplashScreen”，

或者在 App.xaml.cs 中重写 OnStartUp 方法，

        /// 

        /// 重写启动方法
        /// 
        /// 
        protected override void OnStartup(StartupEventArgs e)
        {
            SplashScreen splashScreen = new SplashScreen("chromium-256.ico");
            // true => SplashScreen 自动关闭
            // false => SplashScreen 不关闭
            splashScreen.Show(false);
            // 配置 SplashScreen 关闭时间，1s
            // SplashScreen 的关闭时间是基于主窗口加载完成的时间。
            // 如果主窗口的加载时间比 1 秒要短，那么 SplashScreen 将会在主窗口加载完成后立即关闭。
            splashScreen.Close(new TimeSpan(0, 0, 1));
            base.OnStartup(e);

        }

注意：

1、Show 方法参数需要设置为 false 才不会自动关闭界面，如果主窗口的加载时间比 1 秒要短，那么 SplashScreen 将会在主窗口加载完成后立即关闭。

2、引入资源为 “Resource” 类型，在 Resources 文件夹下添加资源。

8、加载等待效果

        /// 

        /// 状态更新处理
        /// 
        /// 
        /// 
        private void OnLoadingStateChanged(object sender, LoadingStateChangedEventArgs args)
        {
            if (args.IsLoading)
            {
                // 在 UI 线程上执行操作
                Application.Current.Dispatcher.InvokeOnUiThreadIfRequired(() =>
                {
                    // 加载中
                    isLoading.Visibility = Visibility.Visible;
                });
            }
            else
            {
                Application.Current.Dispatcher.InvokeOnUiThreadIfRequired(() =>
                {
                    // 隐藏进度条
                    isLoading.Visibility = Visibility.Collapsed;
                });
            }
        }

// 加载状态变更
browser.LoadingStateChanged += OnLoadingStateChanged;

效果，

9、窗口对话框

可以使用 Windows Forms 控件，但是它的风格跟外观不一定能跟 WPF 兼容，

using Ookii.Dialogs.Wpf;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace CefWpfApp.Dialogs
{
    public class CustomerFolderBrowserDialog
    {
        /// 

        /// 委托实现，显示文件夹浏览器，返回选中的文件夹路径
        /// 
        /// 
        public static string ShowFolderBrowserDialog_WPF()
        {
            VistaFolderBrowserDialog folderDialog = new VistaFolderBrowserDialog
            {
                Description = "请选择文件夹",
                UseDescriptionForTitle = true,
                SelectedPath = @"D:\AwsomeWorkSpace\CEFWPFAPP\bin\Debug",
            };

            if (folderDialog.ShowDialog() == true)
            {
                return folderDialog.SelectedPath;
            }
            return "";
        }

        /// 

        /// 委托实现，显示文件夹浏览器，返回选中的文件夹路径
        /// 
        /// 
        public static string ShowFolderBrowserDialog_WinForms()
        {
            FolderBrowserDialog folderBrowserDialog = new FolderBrowserDialog()
            {
                Description = "请选择文件夹",
                ShowNewFolderButton = true,
                SelectedPath = @"D:\AwsomeWorkSpace\CEFWPFAPP\bin\Debug",
            };
            if (folderBrowserDialog.ShowDialog() == DialogResult.OK)
            {
                return folderBrowserDialog.SelectedPath;
            }
            return "";
        }
    }
}

为了更符合 WPF ，采用第三方 Ookii.Dialogs.Wpf 库，

在 MainWindow.xaml.cs 中创建异步方法 GetSelectedFolderPath()，

        /// 

        /// 委托
        /// 
        ///         
        public delegate string MyFolderBrowserDialog();

        /// 

        /// 获取文件夹路径
        /// 
        public Task GetSelectedFolderPath()
        {
            // 使用TaskCompletionSource来创建一个未完成的任务
            var tcs = new TaskCompletionSource();

            // 在 UI 线程上执行操作
            Application.Current.Dispatcher.InvokeOnUiThreadIfRequired(() =>
            {
                // 执行回调方法，并获取结果
                string result = CustomerFolderBrowserDialog.ShowFolderBrowserDialog_WPF();
                // 将结果设置到任务完成源，并标记任务为成功
                tcs.SetResult(result);
            });

            // 返回任务对象
            return tcs.Task;
        }

效果，

10、Base64 转图片

// ImageUtil.cs
using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Threading.Tasks;

namespace CefWpfApp.Utils
{
    public class ImageUtil
    {
        public async Task