### PakePlus Development Setup and Commands
Source: https://github.com/sjj1024/pakeplus/wiki/Home
Commands to set up the development environment for PakePlus. Ensure Rust and Node are installed before running these commands. This includes installing dependencies, running the development server, and packaging the application.
```shell
# Install dependencies
pnpm i
# Local development [Right-click to open debug mode.]
pnpm run dev
# Package the app
pnpm run build
```
--------------------------------
### Local Development Setup
Source: https://github.com/sjj1024/pakeplus/blob/main/README_JP.md
Commands to set up and run PacBao for local development. Ensure Rust and Node are installed.
```shell
pnpm i
pnpm run dev
pnpm run build
```
--------------------------------
### Local Development Setup for PakePlus
Source: https://github.com/sjj1024/pakeplus/wiki/PakePlusJp
Commands to set up the development environment for PakePlus. Ensure Rust and Node are installed before running these commands.
```sh
# 依存関係のインストール
pnpm i
# ローカル開発 [右クリックでデバッグモードを開きます。]
pnpm run dev
# アプリのパッケージング
pnpm run build
```
--------------------------------
### Local Development Setup for PacBao
Source: https://github.com/sjj1024/pakeplus/blob/main/README_ZH.md
Commands to set up your environment for local development of PacBao. Ensure Rust and Node are installed.
```shell
pnpm i
pnpm run dev
pnpm run build
```
--------------------------------
### Start Local Development Server for PakePlus
Source: https://github.com/sjj1024/pakeplus/wiki/PakePlusZh
Execute this command to start the local development server for PakePlus. You can right-click to open in debug mode.
```shell
pnpm run dev
```
--------------------------------
### Install Dependencies for PakePlus Development
Source: https://github.com/sjj1024/pakeplus/wiki/PakePlusZh
Run this command to install the necessary dependencies when developing PakePlus locally.
```shell
pnpm i
```
--------------------------------
### Configuration Example for PakePlus
Source: https://github.com/sjj1024/pakeplus/blob/main/docs/zh/guide/custompack.md
Modify software names, icons, and other configurations in the scripts/ppconfig.json file. This snippet shows common configuration fields.
```json
"name": "英文名称",
"showName": "显示名称",
"version": "版本号",
"id": "com.唯一id.app",
"desc": "项目描述",
"webUrl": "index.html",
"iconPath": "../app-icon.png",
"inputPath": "../app-icon.png",
"tempPath": "./processed-image.png",
"icnsPath": "../src-tauri/icons/icon.icns",
"pubBody": "发布内容描述",
"isHtml": true,
"single": 是否单例模式，true/false,
"state": 状态保持，true/false,
"injectJq": 是否注入 jQuery，true/false,
"tauriApi": 是否注入 Tauri API，true/false,
"debug": 是否开启调试模式，true/false,
```
--------------------------------
### Install Xcode Command Line Tools
Source: https://github.com/sjj1024/pakeplus/blob/main/fastlane/README.md
Ensure the latest version of Xcode command line tools is installed before proceeding with fastlane installation.
```shell
xcode-select --install
```
--------------------------------
### Install Tauri API Dependencies for Frameworks
Source: https://github.com/sjj1024/pakeplus/blob/main/docs/guide/desktopapi.md
Installs necessary dependencies for using Tauri APIs with frameworks like Vue, React, and Next.js, enabling type hinting and full API support. Refer to the Tauri2 official documentation for a complete list of available plugins.
```bash
// core api
pnpm install @tauri-apps/api
// dialog api
pnpm install @tauri-apps/plugin-dialog
// fs api
pnpm install @tauri-apps/plugin-fs
// os api
pnpm install @tauri-apps/plugin-os
// 等等接口，请参考Tauri2官方文档：https://v2.tauri.app/reference/javascript/api/#vanilla-js-api
```
--------------------------------
### Windows 无法运行版本不匹配错误
Source: https://github.com/sjj1024/pakeplus/blob/main/docs/zh/question/index.md
根据你的 Windows 电脑架构（x64 或 arm64），下载对应的安装文件。x64 位系统应下载以 `x64-setup.exe` 结尾的文件，arm64 位系统应下载以 `_arm64-setup.exe` 结尾的文件。
```text
x64-setup.exe
x64-setup.exe.sig
```
```text
_arm64-setup.exe
_arm64-setup.exe.sig
```
--------------------------------
### GitHub 403 Error Response Example
Source: https://github.com/sjj1024/pakeplus/blob/main/docs/question/limit.md
This is an example of a 403 error response from GitHub, indicating an account suspension. This type of error prompted the implementation of limits in PakePlus.
```shell
Received a 403 error. Data returned as aString was: f"message":"Sorry. Your
account was
suspended.""documentation url"."https://docs.qithub.com/
graphgl""status":"403"
```
--------------------------------
### Initialize Password Input UI and Theme
Source: https://github.com/sjj1024/pakeplus/blob/main/dist/pppwd.html
Sets up the initial UI elements, applies system or custom themes based on project settings, and configures event listeners for input changes. This code runs when the window loads.
```javascript
window.onload = () => {
// 设置样式
if (currentProject[previewType].pwdTheme === 'system') {
// document.body.classList.add('system')
const mediaQuery = window.matchMedia( '(prefers-color-scheme: dark)' )
if (mediaQuery) {
const listener = (e) => {
const newTheme = e.matches ? 'dark' : 'light'
document.body.classList.add(newTheme)
}
mediaQuery.addEventListener('change', listener)
}
} else {
document.body.classList.add( currentProject[previewType].pwdTheme )
}
document.getElementById('cardBox').classList = currentProject[previewType].pwdStyle || 'flat'
// 设置标题
document.title = currentProject[previewType].pwdTitle
document.getElementById('title').textContent = currentProject[previewType].pwdTitle || '请输入密码'
document.getElementById('code').placeholder = currentProject[previewType].pwdPlace
document.getElementById('tip').textContent = currentProject[previewType].pwdTip
document.getElementById('error').textContent = currentProject[previewType].pwdError || '密码错误'
document.getElementById('button').textContent = currentProject[previewType].pwdBtn || '验证'
// 设置密码列表
pwdList.push(currentProject[previewType].startPwd || '123456')
// 输入时清除错误提示
const codeInput = document.getElementById('code')
const error = document.getElementById('error')
codeInput.addEventListener('input', () => {
error.style.opacity = 0
})
}
```
--------------------------------
### Listen for Download Progress Events (PakePlus)
Source: https://github.com/sjj1024/pakeplus/blob/main/docs/guide/desktopapi.md
Sets up an event listener to receive download progress updates from the backend. This allows the frontend to display real-time download progress to the user. The listener expects a payload containing downloaded bytes and total bytes.
```javascript
const { listen } = window.__TAURI__.event
listen('download_progress', (event: any) => {
downloadProgress.value = Number(
((event.payload.downloaded / event.payload.total) * 100).toFixed(2)
)
})
```
--------------------------------
### Import Payer Component
Source: https://github.com/sjj1024/pakeplus/blob/main/docs/sponsor/list.md
This snippet shows how to import the Payer component in a Vue.js setup script.
```javascript
import Payer from '../components/payer.vue'
```
--------------------------------
### Build Application with PakePlus
Source: https://github.com/sjj1024/pakeplus/wiki/PakePlusZh
Use this command to package your application using PakePlus for local development.
```shell
pnpm run build
```
--------------------------------
### Bypass Mac Quarantine
Source: https://github.com/sjj1024/pakeplus/blob/main/README_JP.md
Use this command to bypass the 'app is damaged' warning on Mac when installing PacBao.
```shell
sudo xattr -r -d com.apple.quarantine /Applications/PacBao.app
```
--------------------------------
### Get DOM Elements
Source: https://github.com/sjj1024/pakeplus/blob/main/scripts/water.html
Selects all necessary HTML elements from the document for user interaction and canvas manipulation.
```javascript
const imageUpload = document.getElementById('imageUpload')
const watermarkText = document.getElementById('watermarkText')
const watermarkColor = document.getElementById('watermarkColor')
const watermarkOpacity = document.getElementById('watermarkOpacity')
const opacityValue = document.getElementById('opacityValue')
const watermarkSize = document.getElementById('watermarkSize')
const sizeValue = document.getElementById('sizeValue')
const watermarkAngle = document.getElementById('watermarkAngle')
const angleValue = document.getElementById('angleValue')
const watermarkSpacing = document.getElementById('watermarkSpacing')
const spacingValue = document.getElementById('spacingValue')
const addWatermarkBtn = document.getElementById('addWatermarkBtn')
const downloadBtn = document.getElementById('downloadBtn')
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
```
--------------------------------
### Run fastlane upload_metadata_ios Action
Source: https://github.com/sjj1024/pakeplus/blob/main/fastlane/README.md
Execute the upload_metadata_ios action using fastlane. The `bundle exec` prefix is optional.
```shell
[bundle exec] fastlane upload_metadata_ios
```
--------------------------------
### Remove Quarantine Attribute on Mac
Source: https://github.com/sjj1024/pakeplus/wiki/PakePlusZh
Use this command to resolve 'application is damaged' warnings on macOS when installing PakePlus.
```shell
sudo xattr -r -d com.apple.quarantine /Applications/PakePlus.app
```
--------------------------------
### Run fastlane upload_screenshots_ios Action
Source: https://github.com/sjj1024/pakeplus/blob/main/fastlane/README.md
Execute the upload_screenshots_ios action using fastlane. The `bundle exec` prefix is optional.
```shell
[bundle exec] fastlane upload_screenshots_ios
```
--------------------------------
### Open URL in New Window (PakePlus)
Source: https://github.com/sjj1024/pakeplus/blob/main/docs/guide/desktopapi.md
Creates a new PakePlus webview window to open a specified URL. This allows for creating multi-window applications or opening external links in a controlled PakePlus environment. Configuration options include position, size, and window behavior.
```javascript
const { WebviewWindow } = window.__TAURI__.webviewWindow
const webview = new WebviewWindow('my-label', {
url: 'https://PakePlus.com/',
x: 500,
y: 500,
width: 800,
height: 400,
focus: true,
title: 'PakePlus Window',
alwaysOnTop: true,
center: true,
resizable: true,
transparent: false,
visible: true,
})
webview.once('tauri://created', function () {
// webview successfully created
console.log('new webview created')
})
webview.once('tauri://error', function (e) {
// an error happened creating the webview
console.log('new webview error', e)
})
```
--------------------------------
### Cloud Build Status
Source: https://github.com/sjj1024/pakeplus/blob/main/docs/zh/guide/build.md
This is a status message indicating the outcome of the cloud build process. It guides users on what to expect upon success or failure.
```text
成败在此一举
如果成功，跳转到发布页面，点击下载即可下载你的软件。
如果失败，又上角会有错误提示，可根据错误进行修改或联系我们。
```
--------------------------------
### Download All Icons as ZIP
Source: https://github.com/sjj1024/pakeplus/blob/main/scripts/winIcon.html
Handles the 'Download All' button click event. It uses the JSZip library to create a ZIP archive containing all generated icon PNG files.
```javascript
// Download all icons as ZIP
downloadAllBtn.addEventListener('click', function () {
if (!originalImage) return;
const zip = new JSZip();
const imgFolder = zip.folder('windows_icons');
iconSizes.forEach((size) => {
const canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
const ctx = canvas.getContext('2d');
ctx.drawImage(originalImage, 0, 0, size, size);
canvas.toBlob(function (blob) {
imgFolder.file(`Square${size}x${size}Logo.png`, blob);
// Save when all files are added to the ZIP
if ( Object.keys(imgFolder.files).length === iconSizes.length ) {
zip.generateAsync({ type: 'blob' }).then(function ( content ) {
saveAs(content, 'windows_icons.zip');
});
}
}, 'image/png');
});
});
```
--------------------------------
### Get Command Line Arguments in JavaScript
Source: https://github.com/sjj1024/pakeplus/blob/main/docs/zh/guide/desktopapi.md
Retrieves command-line arguments passed to the application, specifically extracting and decoding a 'token' argument from the URL's query parameters.
```javascript
// start app with command line arguments
PakePlus.exe token=123456
// get command line arguments from js
const urlParams = new URLSearchParams(window.location.search)
// get token arg from url params
const tokenArg = urlParams.get('token') || 'No Param'
// base64 decode params get value
const tokenValue = atob(tokenArg)
```
--------------------------------
### Vue Component for Displaying Team Members
Source: https://github.com/sjj1024/pakeplus/blob/main/docs/sponsor/company.md
This script setup block imports and configures the VPTeamMembers component from vitepress/theme. It defines an array of member objects, each containing avatar, name, title, and links.
```javascript
import { VPTeamMembers } from 'vitepress/theme'
const members = [
{
avatar: 'https://files.pakeplus.com/sichou.png',
name: '丝绸API',
title: 'Specializing in providing high-speed and stable Codex API relay.',
links: [
// { icon: 'github', link: 'https://github.com/FineVoice' },
{ icon: {svg: ''}, link: 'https://code.silkapi.com' }
]
},
{
avatar: 'https://files.pakeplus.com/finevoice.png',
name: 'FineVoice',
title: 'FineVoice is a versatile AI voice generator. Instantly create high-quality, royalty-free voices, SFX, and music.',
links: [
{ icon: 'github', link: 'https://github.com/FineVoice' },
{ icon: {svg: ''}, link: 'https://finevoice.ai/?ref=pakeplus' }
]
},
{
avatar: 'https://avatars.githubusercontent.com/u/54536011?s=200&v=4',
name: 'Tauri',
title: 'Build smaller, faster, and more secure desktop applications with a web frontend',
links: [
]
}
]
```
--------------------------------
### Write Binary File (PNG Image)
Source: https://github.com/sjj1024/pakeplus/blob/main/docs/guide/desktopapi.md
Creates a PNG image from a canvas, converts it to a Uint8Array, and saves it to the download directory. This requires canvas support and the `fs` module.
```javascript
// 创建Canvas
const canvas = document.createElement('canvas')
canvas.width = 100
canvas.height = 100
const ctx = canvas.getContext('2d')
// 绘制红色方块
ctx.fillStyle = '#ff0000'
ctx.fillRect(0, 0, 100, 100)
// 绘制文字
ctx.fillStyle = '#ffffff'
ctx.font = '20px Arial'
ctx.fillText('PakePlus', 30, 50)
// 转换为PNG并保存
const blob = await new Promise((resolve) => {
canvas.toBlob(resolve, 'image/png', 1.0)
})
if (!blob) throw new Error('无法创建Blob')
const arrayBuffer = await blob.arrayBuffer()
const uint8Array = new Uint8Array(arrayBuffer)
console.log('uint8Array11', uint8Array)
const file = await writeFile('pakeplus_test.png', uint8Array, {
baseDir: BaseDirectory.Download,
})
```
--------------------------------
### Download File with Progress (PakePlus)
Source: https://github.com/sjj1024/pakeplus/blob/main/docs/guide/desktopapi.md
Initiates a file download from a network URL to a specified local path using the Tauri invoke command. It supports multi-file downloads and provides progress callbacks for monitoring the download status. Ensure the TauriApi is enabled.
```javascript
const { invoke } = window.__TAURI__.core
if ('__TAURI__' in window) {
await invoke('download_file', {
url: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
savePath: 'test.png',
fileId: 'test',
})
}
```