@leejungkiin/awkit 1.5.5 → 1.6.0

package/skill-packs/electron/skills/electron/examples/api/menu.md

@@ -0,0 +1,187 @@
+# Menu | 菜单
+
+**官方文档**: https://www.electronjs.org/zh/docs/latest/,
+
+
+## Instructions
+
+This example demonstrates how to use Menu to create application menus and context menus.
+
+### Key Concepts
+
+- Application menu
+- Context menu
+- Menu items
+- Menu roles
+- Menu accelerators
+
+### Example: Application Menu
+
+```javascript
+const { app, Menu } = require('electron')
+
+const template = [
+  {
+    label: 'File',
+    submenu: [
+      {
+        label: 'New',
+        accelerator: 'CmdOrCtrl+N',
+        click: () => {
+          console.log('New file')
+        }
+      },
+      {
+        label: 'Open',
+        accelerator: 'CmdOrCtrl+O',
+        click: () => {
+          console.log('Open file')
+        }
+      },
+      { type: 'separator' },
+      {
+        label: 'Exit',
+        accelerator: process.platform === 'darwin' ? 'Cmd+Q' : 'Ctrl+Q',
+        click: () => {
+          app.quit()
+        }
+      }
+    ]
+  },
+  {
+    label: 'Edit',
+    submenu: [
+      { role: 'undo', label: 'Undo' },
+      { role: 'redo', label: 'Redo' },
+      { type: 'separator' },
+      { role: 'cut', label: 'Cut' },
+      { role: 'copy', label: 'Copy' },
+      { role: 'paste', label: 'Paste' }
+    ]
+  },
+  {
+    label: 'View',
+    submenu: [
+      { role: 'reload', label: 'Reload' },
+      { role: 'forceReload', label: 'Force Reload' },
+      { role: 'toggleDevTools', label: 'Toggle Developer Tools' },
+      { type: 'separator' },
+      { role: 'resetZoom', label: 'Actual Size' },
+      { role: 'zoomIn', label: 'Zoom In' },
+      { role: 'zoomOut', label: 'Zoom Out' },
+      { type: 'separator' },
+      { role: 'togglefullscreen', label: 'Toggle Fullscreen' }
+    ]
+  },
+  {
+    label: 'Window',
+    submenu: [
+      { role: 'minimize', label: 'Minimize' },
+      { role: 'close', label: 'Close' }
+    ]
+  }
+]
+
+// macOS: Add app menu
+if (process.platform === 'darwin') {
+  template.unshift({
+    label: app.getName(),
+    submenu: [
+      { role: 'about', label: 'About' },
+      { type: 'separator' },
+      { role: 'services', label: 'Services' },
+      { type: 'separator' },
+      { role: 'hide', label: 'Hide' },
+      { role: 'hideOthers', label: 'Hide Others' },
+      { role: 'unhide', label: 'Show All' },
+      { type: 'separator' },
+      { role: 'quit', label: 'Quit' }
+    ]
+  })
+}
+
+const menu = Menu.buildFromTemplate(template)
+Menu.setApplicationMenu(menu)
+```
+
+### Example: Context Menu
+
+```javascript
+const { Menu, MenuItem } = require('electron')
+
+// In preload.js
+const { contextBridge } = require('electron')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  showContextMenu: () => {
+    const menu = new Menu()
+    
+    menu.append(new MenuItem({
+      label: 'Copy',
+      role: 'copy'
+    }))
+    
+    menu.append(new MenuItem({
+      label: 'Paste',
+      role: 'paste'
+    }))
+    
+    menu.append(new MenuItem({
+      type: 'separator'
+    }))
+    
+    menu.append(new MenuItem({
+      label: 'Custom Action',
+      click: () => {
+        console.log('Custom action clicked')
+      }
+    }))
+    
+    menu.popup()
+  }
+})
+```
+
+### Example: Dynamic Menu
+
+```javascript
+const { Menu } = require('electron')
+
+function updateMenu(hasFile) {
+  const template = [
+    {
+      label: 'File',
+      submenu: [
+        {
+          label: 'New',
+          enabled: true,
+          click: () => createNewFile()
+        },
+        {
+          label: 'Open',
+          enabled: true,
+          click: () => openFile()
+        },
+        {
+          label: 'Save',
+          enabled: hasFile,
+          click: () => saveFile()
+        }
+      ]
+    }
+  ]
+  
+  const menu = Menu.buildFromTemplate(template)
+  Menu.setApplicationMenu(menu)
+}
+```
+
+### Key Points
+
+- Use Menu.buildFromTemplate() to create menus
+- Use Menu.setApplicationMenu() for app menu
+- Use menu.popup() for context menus
+- Use role property for standard menu items
+- Use accelerator for keyboard shortcuts
+- macOS requires special app menu structure
+- Context menus should be created in preload or main process

package/skill-packs/electron/skills/electron/examples/getting-started/installation.md

@@ -0,0 +1,88 @@
+# Installation | 安装
+
+**官方文档**: https://www.electronjs.org/zh/docs/latest/,
+
+
+## Instructions
+
+This example demonstrates how to install Electron and set up a basic project.
+
+### Key Concepts
+
+- Installing Electron
+- Project structure
+- package.json configuration
+- Running Electron app
+
+### Example: Installation
+
+```bash
+# Using npm
+npm install electron --save-dev
+
+# Using yarn
+yarn add electron --dev
+
+# Using pnpm
+pnpm add electron --save-dev
+```
+
+### Example: Basic package.json
+
+```json
+{
+  "name": "my-electron-app",
+  "version": "1.0.0",
+  "description": "My Electron app",
+  "main": "main.js",
+  "scripts": {
+    "start": "electron .",
+    "dev": "electron ."
+  },
+  "devDependencies": {
+    "electron": "^latest"
+  }
+}
+```
+
+### Example: Project Structure
+
+```
+my-electron-app/
+├── main.js          # Main process entry point
+├── preload.js       # Preload script (optional)
+├── renderer/
+│   ├── index.html   # Renderer HTML
+│   └── renderer.js  # Renderer script
+├── package.json
+└── README.md
+```
+
+### Example: Running the App
+
+```bash
+# Start the app
+npm start
+
+# Or directly
+npx electron .
+```
+
+### Example: Using Electron Forge
+
+```bash
+# Create new project with Electron Forge
+npm create electron-app@latest my-app
+
+# Or add to existing project
+npx @electron-forge/cli import
+```
+
+### Key Points
+
+- Install Electron as dev dependency
+- Set `main` field in package.json to main process file
+- Use `electron .` to run the app
+- Main process file (main.js) is required
+- Electron Forge can scaffold projects automatically
+- Works on Windows, macOS, and Linux

package/skill-packs/electron/skills/electron/examples/getting-started/quick-start.md

@@ -0,0 +1,104 @@
+# Quick Start | 快速开始
+
+**官方文档**: https://www.electronjs.org/zh/docs/latest/,
+
+
+## Instructions
+
+This example demonstrates how to create a basic Electron application.
+
+### Key Concepts
+
+- Main process setup
+- Creating BrowserWindow
+- Loading HTML content
+- App lifecycle
+
+### Example: Basic main.js
+
+```javascript
+// main.js
+const { app, BrowserWindow } = require('electron')
+const path = require('path')
+
+function createWindow() {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  })
+
+  win.loadFile('index.html')
+}
+
+app.whenReady().then(() => {
+  createWindow()
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow()
+    }
+  })
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+```
+
+### Example: Basic index.html
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Hello Electron</title>
+</head>
+<body>
+  <h1>Hello Electron!</h1>
+  <p>Welcome to Electron</p>
+  <script src="renderer.js"></script>
+</body>
+</html>
+```
+
+### Example: Basic preload.js
+
+```javascript
+// preload.js
+const { contextBridge, ipcRenderer } = require('electron')
+
+// Expose protected methods that allow the renderer process to use
+// the ipcRenderer without exposing the entire object
+contextBridge.exposeInMainWorld('electronAPI', {
+  openFile: () => ipcRenderer.invoke('dialog:openFile')
+})
+```
+
+### Example: Basic renderer.js
+
+```javascript
+// renderer.js
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('Renderer process loaded')
+  
+  // Use exposed API from preload
+  window.electronAPI.openFile().then(result => {
+    console.log('File selected:', result)
+  })
+})
+```
+
+### Key Points
+
+- Main process (main.js) controls app lifecycle
+- BrowserWindow creates application windows
+- loadFile() loads local HTML files
+- Preload scripts bridge main and renderer safely
+- Renderer process runs web content
+- Use contextBridge for secure IPC exposure

package/skill-packs/electron/skills/electron/examples/processes/ipc-communication.md

@@ -0,0 +1,140 @@
+# IPC Communication | IPC 通信
+
+**官方文档**: https://www.electronjs.org/zh/docs/latest/,
+
+
+## Instructions
+
+This example demonstrates IPC (Inter-Process Communication) between main and renderer processes.
+
+### Key Concepts
+
+- ipcMain in main process
+- ipcRenderer in renderer process
+- contextBridge for secure exposure
+- Two-way communication
+
+### Example: Basic IPC Setup
+
+```javascript
+// main.js
+const { app, BrowserWindow, ipcMain } = require('electron')
+const path = require('path')
+
+let mainWindow
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: true,
+      nodeIntegration: false
+    }
+  })
+
+  mainWindow.loadFile('index.html')
+}
+
+// Handle IPC from renderer
+ipcMain.handle('get-app-version', () => {
+  return app.getVersion()
+})
+
+ipcMain.on('window-minimize', () => {
+  mainWindow.minimize()
+})
+
+app.whenReady().then(() => {
+  createWindow()
+})
+```
+
+### Example: Preload Script
+
+```javascript
+// preload.js
+const { contextBridge, ipcRenderer } = require('electron')
+
+// Expose safe API to renderer
+contextBridge.exposeInMainWorld('electronAPI', {
+  getVersion: () => ipcRenderer.invoke('get-app-version'),
+  minimizeWindow: () => ipcRenderer.send('window-minimize'),
+  
+  // Two-way communication
+  openFile: () => ipcRenderer.invoke('dialog:openFile'),
+  
+  // Listen to main process
+  onUpdateAvailable: (callback) => {
+    ipcRenderer.on('update-available', (event, data) => callback(data))
+  }
+})
+```
+
+### Example: Renderer Process
+
+```javascript
+// renderer.js
+document.addEventListener('DOMContentLoaded', () => {
+  // Get app version
+  window.electronAPI.getVersion().then(version => {
+    console.log('App version:', version)
+  })
+  
+  // Minimize window
+  document.getElementById('minimize-btn').addEventListener('click', () => {
+    window.electronAPI.minimizeWindow()
+  })
+  
+  // Open file dialog
+  document.getElementById('open-file-btn').addEventListener('click', async () => {
+    const result = await window.electronAPI.openFile()
+    console.log('Selected file:', result)
+  })
+  
+  // Listen for updates
+  window.electronAPI.onUpdateAvailable((data) => {
+    console.log('Update available:', data)
+  })
+})
+```
+
+### Example: Advanced IPC Patterns
+
+```javascript
+// main.js
+const { ipcMain, dialog } = require('electron')
+
+// Handle with async response
+ipcMain.handle('dialog:openFile', async () => {
+  const { canceled, filePaths } = await dialog.showOpenDialog({
+    properties: ['openFile']
+  })
+  
+  if (!canceled) {
+    return filePaths[0]
+  }
+  return null
+})
+
+// Send to renderer
+ipcMain.on('check-updates', () => {
+  // Simulate update check
+  setTimeout(() => {
+    mainWindow.webContents.send('update-available', {
+      version: '1.0.1',
+      url: 'https://example.com/update'
+    })
+  }, 2000)
+})
+```
+
+### Key Points
+
+- Use ipcMain.handle() for request-response pattern
+- Use ipcMain.on() for one-way communication
+- Use contextBridge.exposeInMainWorld() for secure API exposure
+- Never expose ipcRenderer directly to renderer
+- Use contextIsolation: true and nodeIntegration: false
+- IPC enables safe communication between processes

package/skill-packs/electron/skills/electron/examples/processes/main-process.md

@@ -0,0 +1,121 @@
+# Main Process | 主进程
+
+**官方文档**: https://www.electronjs.org/zh/docs/latest/,
+
+
+## Instructions
+
+This example demonstrates main process concepts and usage in Electron.
+
+### Key Concepts
+
+- Main process role
+- App lifecycle events
+- Creating windows
+- Managing application state
+
+### Example: App Lifecycle
+
+```javascript
+// main.js
+const { app, BrowserWindow } = require('electron')
+
+let mainWindow
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      preload: path.join(__dirname, 'preload.js')
+    }
+  })
+
+  mainWindow.loadFile('index.html')
+  
+  mainWindow.on('closed', () => {
+    mainWindow = null
+  })
+}
+
+// App ready
+app.whenReady().then(() => {
+  createWindow()
+})
+
+// macOS: Re-open window when dock icon is clicked
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})
+
+// Quit when all windows are closed (except macOS)
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+```
+
+### Example: App Events
+
+```javascript
+const { app } = require('electron')
+
+// Before app quits
+app.on('before-quit', (event) => {
+  console.log('App is about to quit')
+})
+
+// Will quit
+app.on('will-quit', (event) => {
+  console.log('App will quit')
+})
+
+// Quit
+app.on('quit', () => {
+  console.log('App quit')
+})
+
+// Second instance
+app.on('second-instance', () => {
+  // Focus existing window
+  if (mainWindow) {
+    if (mainWindow.isMinimized()) mainWindow.restore()
+    mainWindow.focus()
+  }
+})
+```
+
+### Example: Single Instance App
+
+```javascript
+const { app } = require('electron')
+
+const gotTheLock = app.requestSingleInstanceLock()
+
+if (!gotTheLock) {
+  app.quit()
+} else {
+  app.on('second-instance', () => {
+    // Handle second instance
+  })
+  
+  // Continue with app initialization
+  app.whenReady().then(() => {
+    createWindow()
+  })
+}
+```
+
+### Key Points
+
+- Main process manages app lifecycle
+- Use app.whenReady() before creating windows
+- Handle window-all-closed for proper quit behavior
+- macOS requires special handling for dock icon
+- Use requestSingleInstanceLock() for single instance apps
+- Main process has full Node.js access