ykvue

使用说明

该库可以创建pywebview框架的项目。前端使用了ts+vue+tailwindcss 4.1.18。

安装

pnpm install --global ykvue@latest

使用方法

使用如下命令创建项目，project-name替换为自定义名称。

ykvue create project-name

例如

PS C:\Users\wysun\PycharmProjects\gravity\ai> ykvue create test

? Choose a template (Use arrow keys)
>  pywebview-vue-template
   vue-electron-template

选择pywebview-vue-template即可，目前vue-electron-template没有维护。

创建项目后，进入项目目录，依次执行：

pnpm install
pnpm app   // 运行桌面版
pnpm dev   // 运行网页版

pnpm app命令以桌面应用的形式运行软件。如果需要使用网页版，则执行：pnpm dev。桌面版的运行结果如下：

网页版运行结果与桌面版几乎一样，但是桌面版多了python后端的一些功能，该项目中已经集成了python后端。只是 以网页版运行时，无法使用python后端功能，网页版运行时会尽量使用前端的替代功能，如：

1. 打开本地文件功能 如果是桌面应用版，则使用python的打开文件功能，可以直接读取本地文件路径和内容。而网页版无法获取文件路径， 但可以以上传的方式获取文件内容。
2. 保存文件功能 桌面版会使用python的保存文件功能，保存文件。网页版无法保存文件，只能以网页模式下载文件内容，保存到本地。

该pywebview-vue-template集成了登录功能，用户可直接注册账号登录使用。后台的登录和注册服务器地址和端口可通过如下方法配置：

import {useYklibLoginStore} from 'yklib'
import {storeToRefs} from 'pinia'

const store = useYklibLoginStore()
store.serverHost = 'your_host_ip_or_domain' // 你的登录注册服务器地址
store.serverPort = 'your_server_port' // 你的登录注册服务器端口

该pywebview-vue-template集成了注册和登录功能，用户可直接注册账号登录使用。登录后界面如下图所示：

界面上有【打开终端抽屉】、【终端测试】、【Python终端测试】、【设置任务栏信息】和【Python设置任务栏信息】按钮。 可以实现相应的功能。

打开终端抽屉会在页面中打开一个终端。

软件中前后端均可以使用printToTerminal(msg, level)方式在终端中打印信息。

使用setTaskBar(title, progress)设置任务栏信息，progress为0-100，0为无进度，100为完成。具体方法为：

前端使用集成的方法：

在任何自定义的*.vue组件中，注入方法后使用，如下示例：

import { inject } from "vue";

const printToTerm = inject('printToTerm') as (msg: string, level: 'info' | 'error' | 'warn' | 'command' | 'debug') => void; // 注入printToTerm方法，供子组件使用
const setTaskBar = inject('setTaskBar') as (text: string, progress: number) => void; // 注入setTaskBar方法，供子组件使用
const openDrawer = inject('openDrawer') as () => void; // 注入openDrawer方法，供子组件使用

后端使用集成方法：

from YkPywebview import YkWebviewApi, start


class Api(YkWebviewApi):
    def __init__(self) -> None:
        super().__init__()
        
    def 使用示例(self):
        self.printToTerm("终端输出信息", "debug") # 第二个参数可选，为日志级别 
        self.setTaskBar("任务栏设置信息", progress=40) # progress为可选参数，为进度条的值
        self.openTerminal()  # 打开终端抽屉


if __name__ == '__main__':
    start(Api, url='./dist/index.html', debug=True)

下图是终端输出结果：

下图是设置任务栏状态的效果：

软件内置了保存和加载项目功能，默认项目保存文件为settings.project.toml。前后端使用方法分别为：

前端使用方法（任意组件中）：

import { useYklibLoginStore } from 'yklib'
import {storeToRefs} from 'pinia'

const store = useYklibLoginStore()
const {isPywebview} = storeToRefs(store) // isPywebview为是否为pywebview环境，网页版运行该值为false
await store.loadAppSettings() // 加载应用设置，该函数一般使用不上，保存应用界面的大小和位置等信息
const project = await store.loadProjectSettings() // 加载项目文件
await store.saveProjectSettings({ par1: '参数1的值', par2: '参数2的值'}) // 保存项目文件

后端使用方法（Api(YkWebviewApi)类中）：

from YkPywebview import YkWebviewApi, start


class Api(YkWebviewApi):
    def __init__(self) -> None:
        super().__init__()
        self.project = self.loadProjectSettings()  # 加载默认的项目文件
        self.saveProjectSettings({'par1': '参数1的值', 'par2': '参数2的值'})  # 保存当前项目到默认的项目文件，也可传入project的部分参数，该方法会合并传入的参数和当前的self.project字典


if __name__ == '__main__':
    start(Api, url='./dist/index.html', debug=True)