commit
7fd7d8c1af
38 changed files with 5952 additions and 0 deletions
@ -0,0 +1,9 @@ |
|||||
|
root = true |
||||
|
|
||||
|
[*] |
||||
|
charset = utf-8 |
||||
|
indent_style = space |
||||
|
indent_size = 2 |
||||
|
end_of_line = lf |
||||
|
insert_final_newline = true |
||||
|
trim_trailing_whitespace = true |
||||
@ -0,0 +1,6 @@ |
|||||
|
node_modules |
||||
|
dist |
||||
|
out |
||||
|
.DS_Store |
||||
|
.eslintcache |
||||
|
*.log* |
||||
@ -0,0 +1,2 @@ |
|||||
|
electron_mirror=https://npmmirror.com/mirrors/electron/ |
||||
|
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/ |
||||
@ -0,0 +1,6 @@ |
|||||
|
out |
||||
|
dist |
||||
|
pnpm-lock.yaml |
||||
|
LICENSE.md |
||||
|
tsconfig.json |
||||
|
tsconfig.*.json |
||||
@ -0,0 +1,4 @@ |
|||||
|
singleQuote: true |
||||
|
semi: false |
||||
|
printWidth: 100 |
||||
|
trailingComma: none |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"recommendations": ["dbaeumer.vscode-eslint"] |
||||
|
} |
||||
@ -0,0 +1,39 @@ |
|||||
|
{ |
||||
|
"version": "0.2.0", |
||||
|
"configurations": [ |
||||
|
{ |
||||
|
"name": "Debug Main Process", |
||||
|
"type": "node", |
||||
|
"request": "launch", |
||||
|
"cwd": "${workspaceRoot}", |
||||
|
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite", |
||||
|
"windows": { |
||||
|
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd" |
||||
|
}, |
||||
|
"runtimeArgs": ["--sourcemap"], |
||||
|
"env": { |
||||
|
"REMOTE_DEBUGGING_PORT": "9222" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"name": "Debug Renderer Process", |
||||
|
"port": 9222, |
||||
|
"request": "attach", |
||||
|
"type": "chrome", |
||||
|
"webRoot": "${workspaceFolder}/src/renderer", |
||||
|
"timeout": 60000, |
||||
|
"presentation": { |
||||
|
"hidden": true |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
"compounds": [ |
||||
|
{ |
||||
|
"name": "Debug All", |
||||
|
"configurations": ["Debug Main Process", "Debug Renderer Process"], |
||||
|
"presentation": { |
||||
|
"order": 1 |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,11 @@ |
|||||
|
{ |
||||
|
"[typescript]": { |
||||
|
"editor.defaultFormatter": "esbenp.prettier-vscode" |
||||
|
}, |
||||
|
"[javascript]": { |
||||
|
"editor.defaultFormatter": "esbenp.prettier-vscode" |
||||
|
}, |
||||
|
"[json]": { |
||||
|
"editor.defaultFormatter": "esbenp.prettier-vscode" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,34 @@ |
|||||
|
# electron-trpc-demo |
||||
|
|
||||
|
An Electron application with Vue and TypeScript |
||||
|
|
||||
|
## Recommended IDE Setup |
||||
|
|
||||
|
- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) |
||||
|
|
||||
|
## Project Setup |
||||
|
|
||||
|
### Install |
||||
|
|
||||
|
```bash |
||||
|
$ npm install |
||||
|
``` |
||||
|
|
||||
|
### Development |
||||
|
|
||||
|
```bash |
||||
|
$ npm run dev |
||||
|
``` |
||||
|
|
||||
|
### Build |
||||
|
|
||||
|
```bash |
||||
|
# For windows |
||||
|
$ npm run build:win |
||||
|
|
||||
|
# For macOS |
||||
|
$ npm run build:mac |
||||
|
|
||||
|
# For Linux |
||||
|
$ npm run build:linux |
||||
|
``` |
||||
@ -0,0 +1,12 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> |
||||
|
<plist version="1.0"> |
||||
|
<dict> |
||||
|
<key>com.apple.security.cs.allow-jit</key> |
||||
|
<true/> |
||||
|
<key>com.apple.security.cs.allow-unsigned-executable-memory</key> |
||||
|
<true/> |
||||
|
<key>com.apple.security.cs.allow-dyld-environment-variables</key> |
||||
|
<true/> |
||||
|
</dict> |
||||
|
</plist> |
||||
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 35 KiB |
@ -0,0 +1,3 @@ |
|||||
|
provider: generic |
||||
|
url: https://example.com/auto-updates |
||||
|
updaterCacheDirName: electron-trpc-demo-updater |
||||
@ -0,0 +1,45 @@ |
|||||
|
appId: com.electron.app |
||||
|
productName: electron-trpc-demo |
||||
|
directories: |
||||
|
buildResources: build |
||||
|
files: |
||||
|
- '!**/.vscode/*' |
||||
|
- '!src/*' |
||||
|
- '!electron.vite.config.{js,ts,mjs,cjs}' |
||||
|
- '!{.eslintcache,eslint.config.mjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}' |
||||
|
- '!{.env,.env.*,.npmrc,pnpm-lock.yaml}' |
||||
|
- '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}' |
||||
|
asarUnpack: |
||||
|
- resources/** |
||||
|
win: |
||||
|
executableName: electron-trpc-demo |
||||
|
nsis: |
||||
|
artifactName: ${name}-${version}-setup.${ext} |
||||
|
shortcutName: ${productName} |
||||
|
uninstallDisplayName: ${productName} |
||||
|
createDesktopShortcut: always |
||||
|
mac: |
||||
|
entitlementsInherit: build/entitlements.mac.plist |
||||
|
extendInfo: |
||||
|
- NSCameraUsageDescription: Application requests access to the device's camera. |
||||
|
- NSMicrophoneUsageDescription: Application requests access to the device's microphone. |
||||
|
- NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder. |
||||
|
- NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder. |
||||
|
notarize: false |
||||
|
dmg: |
||||
|
artifactName: ${name}-${version}.${ext} |
||||
|
linux: |
||||
|
target: |
||||
|
- AppImage |
||||
|
- snap |
||||
|
- deb |
||||
|
maintainer: electronjs.org |
||||
|
category: Utility |
||||
|
appImage: |
||||
|
artifactName: ${name}-${version}.${ext} |
||||
|
npmRebuild: false |
||||
|
publish: |
||||
|
provider: generic |
||||
|
url: https://example.com/auto-updates |
||||
|
electronDownload: |
||||
|
mirror: https://npmmirror.com/mirrors/electron/ |
||||
@ -0,0 +1,20 @@ |
|||||
|
import { resolve } from 'path' |
||||
|
import { defineConfig, externalizeDepsPlugin } from 'electron-vite' |
||||
|
import vue from '@vitejs/plugin-vue' |
||||
|
|
||||
|
export default defineConfig({ |
||||
|
main: { |
||||
|
plugins: [externalizeDepsPlugin()] |
||||
|
}, |
||||
|
preload: { |
||||
|
plugins: [externalizeDepsPlugin()] |
||||
|
}, |
||||
|
renderer: { |
||||
|
resolve: { |
||||
|
alias: { |
||||
|
'@renderer': resolve('src/renderer/src') |
||||
|
} |
||||
|
}, |
||||
|
plugins: [vue()] |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,40 @@ |
|||||
|
import { defineConfig } from 'eslint/config' |
||||
|
import tseslint from '@electron-toolkit/eslint-config-ts' |
||||
|
import eslintConfigPrettier from '@electron-toolkit/eslint-config-prettier' |
||||
|
import eslintPluginVue from 'eslint-plugin-vue' |
||||
|
import vueParser from 'vue-eslint-parser' |
||||
|
|
||||
|
export default defineConfig( |
||||
|
{ ignores: ['**/node_modules', '**/dist', '**/out'] }, |
||||
|
tseslint.configs.recommended, |
||||
|
eslintPluginVue.configs['flat/recommended'], |
||||
|
{ |
||||
|
files: ['**/*.vue'], |
||||
|
languageOptions: { |
||||
|
parser: vueParser, |
||||
|
parserOptions: { |
||||
|
ecmaFeatures: { |
||||
|
jsx: true |
||||
|
}, |
||||
|
extraFileExtensions: ['.vue'], |
||||
|
parser: tseslint.parser |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
files: ['**/*.{ts,mts,tsx,vue}'], |
||||
|
rules: { |
||||
|
'vue/require-default-prop': 'off', |
||||
|
'vue/multi-word-component-names': 'off', |
||||
|
'vue/block-lang': [ |
||||
|
'error', |
||||
|
{ |
||||
|
script: { |
||||
|
lang: 'ts' |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
eslintConfigPrettier |
||||
|
) |
||||
@ -0,0 +1,50 @@ |
|||||
|
{ |
||||
|
"name": "electron-trpc-demo", |
||||
|
"version": "1.0.0", |
||||
|
"description": "An Electron application with Vue and TypeScript", |
||||
|
"main": "./out/main/index.js", |
||||
|
"author": "example.com", |
||||
|
"homepage": "https://electron-vite.org", |
||||
|
"scripts": { |
||||
|
"format": "prettier --write .", |
||||
|
"lint": "eslint --cache .", |
||||
|
"typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false", |
||||
|
"typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false", |
||||
|
"typecheck": "npm run typecheck:node && npm run typecheck:web", |
||||
|
"start": "electron-vite preview", |
||||
|
"dev": "electron-vite dev", |
||||
|
"build": "npm run typecheck && electron-vite build", |
||||
|
"postinstall": "electron-builder install-app-deps", |
||||
|
"build:unpack": "npm run build && electron-builder --dir", |
||||
|
"build:win": "npm run build && electron-builder --win", |
||||
|
"build:mac": "npm run build && electron-builder --mac", |
||||
|
"build:linux": "npm run build && electron-builder --linux" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"@electron-toolkit/preload": "^3.0.2", |
||||
|
"@electron-toolkit/utils": "^4.0.0", |
||||
|
"@trpc/client": "^10.45.2", |
||||
|
"@trpc/server": "^10.45.2", |
||||
|
"electron-trpc": "^0.7.1", |
||||
|
"electron-updater": "^6.3.9", |
||||
|
"zod": "^4.1.12" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@electron-toolkit/eslint-config-prettier": "3.0.0", |
||||
|
"@electron-toolkit/eslint-config-ts": "^3.1.0", |
||||
|
"@electron-toolkit/tsconfig": "^2.0.0", |
||||
|
"@types/node": "^22.18.6", |
||||
|
"@vitejs/plugin-vue": "^6.0.1", |
||||
|
"electron": "^38.1.2", |
||||
|
"electron-builder": "^25.1.8", |
||||
|
"electron-vite": "^4.0.1", |
||||
|
"eslint": "^9.36.0", |
||||
|
"eslint-plugin-vue": "^10.4.0", |
||||
|
"prettier": "^3.6.2", |
||||
|
"typescript": "^5.9.2", |
||||
|
"vite": "^7.1.6", |
||||
|
"vue": "^3.5.21", |
||||
|
"vue-eslint-parser": "^10.2.0", |
||||
|
"vue-tsc": "^3.0.7" |
||||
|
} |
||||
|
} |
||||
File diff suppressed because it is too large
|
After Width: | Height: | Size: 35 KiB |
@ -0,0 +1,34 @@ |
|||||
|
import z from 'zod'; |
||||
|
import { initTRPC } from '@trpc/server'; |
||||
|
import { observable } from '@trpc/server/observable'; |
||||
|
import { EventEmitter } from 'events'; |
||||
|
|
||||
|
const ee = new EventEmitter(); |
||||
|
|
||||
|
const t = initTRPC.create({ isServer: true }); |
||||
|
|
||||
|
export const router = t.router({ |
||||
|
greeting: t.procedure.input(z.object({ name: z.string() })).query((req) => { |
||||
|
const { input } = req; |
||||
|
|
||||
|
ee.emit('greeting', `Greeted ${input.name}`); |
||||
|
return { |
||||
|
text: `Hello ${input.name}` as const, |
||||
|
}; |
||||
|
}), |
||||
|
subscript: t.procedure.subscription(() => { |
||||
|
return observable((emit) => { |
||||
|
function onGreet(text: string) { |
||||
|
emit.next({ text }); |
||||
|
} |
||||
|
|
||||
|
ee.on('greeting', onGreet); |
||||
|
|
||||
|
return () => { |
||||
|
ee.off('greeting', onGreet); |
||||
|
}; |
||||
|
}); |
||||
|
}), |
||||
|
}); |
||||
|
|
||||
|
export type AppRouter = typeof router; |
||||
@ -0,0 +1,76 @@ |
|||||
|
import { app, shell, BrowserWindow, ipcMain } from 'electron' |
||||
|
import { join } from 'path' |
||||
|
import { electronApp, optimizer, is } from '@electron-toolkit/utils' |
||||
|
import icon from '../../resources/icon.png?asset' |
||||
|
import { createIPCHandler } from 'electron-trpc/main'; |
||||
|
import { router } from './api'; |
||||
|
|
||||
|
function createWindow(): void { |
||||
|
// Create the browser window.
|
||||
|
const mainWindow = new BrowserWindow({ |
||||
|
width: 900, |
||||
|
height: 670, |
||||
|
show: false, |
||||
|
autoHideMenuBar: true, |
||||
|
...(process.platform === 'linux' ? { icon } : {}), |
||||
|
webPreferences: { |
||||
|
preload: join(__dirname, '../preload/index.js'), |
||||
|
sandbox: false |
||||
|
} |
||||
|
}) |
||||
|
createIPCHandler({ router, windows: [mainWindow] }); |
||||
|
mainWindow.on('ready-to-show', () => { |
||||
|
mainWindow.show() |
||||
|
}) |
||||
|
|
||||
|
mainWindow.webContents.setWindowOpenHandler((details) => { |
||||
|
shell.openExternal(details.url) |
||||
|
return { action: 'deny' } |
||||
|
}) |
||||
|
|
||||
|
// HMR for renderer base on electron-vite cli.
|
||||
|
// Load the remote URL for development or the local html file for production.
|
||||
|
if (is.dev && process.env['ELECTRON_RENDERER_URL']) { |
||||
|
mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL']) |
||||
|
} else { |
||||
|
mainWindow.loadFile(join(__dirname, '../renderer/index.html')) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// This method will be called when Electron has finished
|
||||
|
// initialization and is ready to create browser windows.
|
||||
|
// Some APIs can only be used after this event occurs.
|
||||
|
app.whenReady().then(() => { |
||||
|
// Set app user model id for windows
|
||||
|
electronApp.setAppUserModelId('com.electron') |
||||
|
|
||||
|
// Default open or close DevTools by F12 in development
|
||||
|
// and ignore CommandOrControl + R in production.
|
||||
|
// see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
|
||||
|
app.on('browser-window-created', (_, window) => { |
||||
|
optimizer.watchWindowShortcuts(window) |
||||
|
}) |
||||
|
|
||||
|
// IPC test
|
||||
|
ipcMain.on('ping', () => console.log('pong')) |
||||
|
|
||||
|
createWindow() |
||||
|
|
||||
|
app.on('activate', function () { |
||||
|
// On macOS it's common to re-create a window in the app when the
|
||||
|
// dock icon is clicked and there are no other windows open.
|
||||
|
if (BrowserWindow.getAllWindows().length === 0) createWindow() |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
// Quit when all windows are closed, except on macOS. There, it's common
|
||||
|
// for applications and their menu bar to stay active until the user quits
|
||||
|
// explicitly with Cmd + Q.
|
||||
|
app.on('window-all-closed', () => { |
||||
|
if (process.platform !== 'darwin') { |
||||
|
app.quit() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// In this file you can include the rest of your app's specific main process
|
||||
|
// code. You can also put them in separate files and require them here.
|
||||
@ -0,0 +1,8 @@ |
|||||
|
import { ElectronAPI } from '@electron-toolkit/preload' |
||||
|
|
||||
|
declare global { |
||||
|
interface Window { |
||||
|
electron: ElectronAPI |
||||
|
api: unknown |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,26 @@ |
|||||
|
import { contextBridge } from 'electron' |
||||
|
import { electronAPI } from '@electron-toolkit/preload' |
||||
|
import { exposeElectronTRPC } from 'electron-trpc/main'; |
||||
|
|
||||
|
process.once('loaded', async () => { |
||||
|
exposeElectronTRPC(); |
||||
|
}); |
||||
|
// Custom APIs for renderer
|
||||
|
const api = {} |
||||
|
|
||||
|
// Use `contextBridge` APIs to expose Electron APIs to
|
||||
|
// renderer only if context isolation is enabled, otherwise
|
||||
|
// just add to the DOM global.
|
||||
|
if (process.contextIsolated) { |
||||
|
try { |
||||
|
contextBridge.exposeInMainWorld('electron', electronAPI) |
||||
|
contextBridge.exposeInMainWorld('api', api) |
||||
|
} catch (error) { |
||||
|
console.error(error) |
||||
|
} |
||||
|
} else { |
||||
|
// @ts-ignore (define in dts)
|
||||
|
window.electron = electronAPI |
||||
|
// @ts-ignore (define in dts)
|
||||
|
window.api = api |
||||
|
} |
||||
@ -0,0 +1,17 @@ |
|||||
|
<!doctype html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta charset="UTF-8" /> |
||||
|
<title>Electron</title> |
||||
|
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --> |
||||
|
<meta |
||||
|
http-equiv="Content-Security-Policy" |
||||
|
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:" |
||||
|
/> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div id="app"></div> |
||||
|
<script type="module" src="/src/main.ts"></script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,39 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import Versions from './components/Versions.vue' |
||||
|
import { client } from './trpc' |
||||
|
|
||||
|
const ipcHandle = (): void => window.electron.ipcRenderer.send('ping') |
||||
|
|
||||
|
client.subscript.subscribe(undefined, { |
||||
|
onData: (data) => { |
||||
|
console.log(data); |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
const rpcHandle = async () => { |
||||
|
console.log(await client.greeting.query({ name: 'World' })); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<img alt="logo" class="logo" src="./assets/electron.svg" /> |
||||
|
<div class="creator">Powered by electron-vite</div> |
||||
|
<div class="text"> |
||||
|
Build an Electron app with |
||||
|
<span class="vue">Vue</span> |
||||
|
and |
||||
|
<span class="ts">TypeScript</span> |
||||
|
</div> |
||||
|
<p class="tip">Please try pressing <code>F12</code> to open the devTool</p> |
||||
|
<div class="actions"> |
||||
|
<div class="action"> |
||||
|
<a href="https://electron-vite.org/" target="_blank" rel="noreferrer">Documentation</a> |
||||
|
</div> |
||||
|
<div class="action"> |
||||
|
<a target="_blank" rel="noreferrer" @click="rpcHandle">Send IPC</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<Versions /> |
||||
|
</template> |
||||
@ -0,0 +1,67 @@ |
|||||
|
:root { |
||||
|
--ev-c-white: #ffffff; |
||||
|
--ev-c-white-soft: #f8f8f8; |
||||
|
--ev-c-white-mute: #f2f2f2; |
||||
|
|
||||
|
--ev-c-black: #1b1b1f; |
||||
|
--ev-c-black-soft: #222222; |
||||
|
--ev-c-black-mute: #282828; |
||||
|
|
||||
|
--ev-c-gray-1: #515c67; |
||||
|
--ev-c-gray-2: #414853; |
||||
|
--ev-c-gray-3: #32363f; |
||||
|
|
||||
|
--ev-c-text-1: rgba(255, 255, 245, 0.86); |
||||
|
--ev-c-text-2: rgba(235, 235, 245, 0.6); |
||||
|
--ev-c-text-3: rgba(235, 235, 245, 0.38); |
||||
|
|
||||
|
--ev-button-alt-border: transparent; |
||||
|
--ev-button-alt-text: var(--ev-c-text-1); |
||||
|
--ev-button-alt-bg: var(--ev-c-gray-3); |
||||
|
--ev-button-alt-hover-border: transparent; |
||||
|
--ev-button-alt-hover-text: var(--ev-c-text-1); |
||||
|
--ev-button-alt-hover-bg: var(--ev-c-gray-2); |
||||
|
} |
||||
|
|
||||
|
:root { |
||||
|
--color-background: var(--ev-c-black); |
||||
|
--color-background-soft: var(--ev-c-black-soft); |
||||
|
--color-background-mute: var(--ev-c-black-mute); |
||||
|
|
||||
|
--color-text: var(--ev-c-text-1); |
||||
|
} |
||||
|
|
||||
|
*, |
||||
|
*::before, |
||||
|
*::after { |
||||
|
box-sizing: border-box; |
||||
|
margin: 0; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
|
||||
|
ul { |
||||
|
list-style: none; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
min-height: 100vh; |
||||
|
color: var(--color-text); |
||||
|
background: var(--color-background); |
||||
|
line-height: 1.6; |
||||
|
font-family: |
||||
|
Inter, |
||||
|
-apple-system, |
||||
|
BlinkMacSystemFont, |
||||
|
'Segoe UI', |
||||
|
Roboto, |
||||
|
Oxygen, |
||||
|
Ubuntu, |
||||
|
Cantarell, |
||||
|
'Fira Sans', |
||||
|
'Droid Sans', |
||||
|
'Helvetica Neue', |
||||
|
sans-serif; |
||||
|
text-rendering: optimizeLegibility; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
} |
||||
|
After Width: | Height: | Size: 5.7 KiB |
@ -0,0 +1,171 @@ |
|||||
|
@import './base.css'; |
||||
|
|
||||
|
body { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
overflow: hidden; |
||||
|
background-image: url('./wavy-lines.svg'); |
||||
|
background-size: cover; |
||||
|
user-select: none; |
||||
|
} |
||||
|
|
||||
|
code { |
||||
|
font-weight: 600; |
||||
|
padding: 3px 5px; |
||||
|
border-radius: 2px; |
||||
|
background-color: var(--color-background-mute); |
||||
|
font-family: |
||||
|
ui-monospace, |
||||
|
SFMono-Regular, |
||||
|
SF Mono, |
||||
|
Menlo, |
||||
|
Consolas, |
||||
|
Liberation Mono, |
||||
|
monospace; |
||||
|
font-size: 85%; |
||||
|
} |
||||
|
|
||||
|
#app { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
margin-bottom: 80px; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
margin-bottom: 20px; |
||||
|
-webkit-user-drag: none; |
||||
|
height: 128px; |
||||
|
width: 128px; |
||||
|
will-change: filter; |
||||
|
transition: filter 300ms; |
||||
|
} |
||||
|
|
||||
|
.logo:hover { |
||||
|
filter: drop-shadow(0 0 1.2em #6988e6aa); |
||||
|
} |
||||
|
|
||||
|
.creator { |
||||
|
font-size: 14px; |
||||
|
line-height: 16px; |
||||
|
color: var(--ev-c-text-2); |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
font-size: 28px; |
||||
|
color: var(--ev-c-text-1); |
||||
|
font-weight: 700; |
||||
|
line-height: 32px; |
||||
|
text-align: center; |
||||
|
margin: 0 10px; |
||||
|
padding: 16px 0; |
||||
|
} |
||||
|
|
||||
|
.tip { |
||||
|
font-size: 16px; |
||||
|
line-height: 24px; |
||||
|
color: var(--ev-c-text-2); |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.vue { |
||||
|
background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff); |
||||
|
background-clip: text; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
|
||||
|
.ts { |
||||
|
background: -webkit-linear-gradient(315deg, #3178c6 45%, #f0dc4e); |
||||
|
background-clip: text; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
|
||||
|
.actions { |
||||
|
display: flex; |
||||
|
padding-top: 32px; |
||||
|
margin: -6px; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
.action { |
||||
|
flex-shrink: 0; |
||||
|
padding: 6px; |
||||
|
} |
||||
|
|
||||
|
.action a { |
||||
|
cursor: pointer; |
||||
|
text-decoration: none; |
||||
|
display: inline-block; |
||||
|
border: 1px solid transparent; |
||||
|
text-align: center; |
||||
|
font-weight: 600; |
||||
|
white-space: nowrap; |
||||
|
border-radius: 20px; |
||||
|
padding: 0 20px; |
||||
|
line-height: 38px; |
||||
|
font-size: 14px; |
||||
|
border-color: var(--ev-button-alt-border); |
||||
|
color: var(--ev-button-alt-text); |
||||
|
background-color: var(--ev-button-alt-bg); |
||||
|
} |
||||
|
|
||||
|
.action a:hover { |
||||
|
border-color: var(--ev-button-alt-hover-border); |
||||
|
color: var(--ev-button-alt-hover-text); |
||||
|
background-color: var(--ev-button-alt-hover-bg); |
||||
|
} |
||||
|
|
||||
|
.versions { |
||||
|
position: absolute; |
||||
|
bottom: 30px; |
||||
|
margin: 0 auto; |
||||
|
padding: 15px 0; |
||||
|
font-family: 'Menlo', 'Lucida Console', monospace; |
||||
|
display: inline-flex; |
||||
|
overflow: hidden; |
||||
|
align-items: center; |
||||
|
border-radius: 22px; |
||||
|
background-color: #202127; |
||||
|
backdrop-filter: blur(24px); |
||||
|
} |
||||
|
|
||||
|
.versions li { |
||||
|
display: block; |
||||
|
float: left; |
||||
|
border-right: 1px solid var(--ev-c-gray-1); |
||||
|
padding: 0 20px; |
||||
|
font-size: 14px; |
||||
|
line-height: 14px; |
||||
|
opacity: 0.8; |
||||
|
&:last-child { |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 720px) { |
||||
|
.text { |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 620px) { |
||||
|
.versions { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 350px) { |
||||
|
.tip, |
||||
|
.actions { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,13 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { reactive } from 'vue' |
||||
|
|
||||
|
const versions = reactive({ ...window.electron.process.versions }) |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<ul class="versions"> |
||||
|
<li class="electron-version">Electron v{{ versions.electron }}</li> |
||||
|
<li class="chrome-version">Chromium v{{ versions.chrome }}</li> |
||||
|
<li class="node-version">Node v{{ versions.node }}</li> |
||||
|
</ul> |
||||
|
</template> |
||||
@ -0,0 +1 @@ |
|||||
|
/// <reference types="vite/client" />
|
||||
@ -0,0 +1,6 @@ |
|||||
|
import './assets/main.css' |
||||
|
|
||||
|
import { createApp } from 'vue' |
||||
|
import App from './App.vue' |
||||
|
|
||||
|
createApp(App).mount('#app') |
||||
@ -0,0 +1,7 @@ |
|||||
|
import { createTRPCProxyClient } from '@trpc/client'; |
||||
|
import { ipcLink } from 'electron-trpc/renderer'; |
||||
|
import type { AppRouter } from '../../main/api'; |
||||
|
|
||||
|
export const client = createTRPCProxyClient<AppRouter>({ |
||||
|
links: [ipcLink()], |
||||
|
}); |
||||
@ -0,0 +1,3 @@ |
|||||
|
https://github.com/jsonnull/electron-trpc/blob/main/examples/basic-react-superjson/src/index.tsx |
||||
|
https://electron-trpc.dev/getting-started/#renderer |
||||
|
https://www.npmjs.com/package/superjson |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"files": [], |
||||
|
"references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.web.json" }] |
||||
|
} |
||||
@ -0,0 +1,8 @@ |
|||||
|
{ |
||||
|
"extends": "@electron-toolkit/tsconfig/tsconfig.node.json", |
||||
|
"include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*"], |
||||
|
"compilerOptions": { |
||||
|
"composite": true, |
||||
|
"types": ["electron-vite/node"] |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,19 @@ |
|||||
|
{ |
||||
|
"extends": "@electron-toolkit/tsconfig/tsconfig.web.json", |
||||
|
"include": [ |
||||
|
"src/renderer/src/env.d.ts", |
||||
|
"src/renderer/src/**/*", |
||||
|
"src/renderer/src/**/*.vue", |
||||
|
"src/preload/*.d.ts", |
||||
|
"src/main/api.ts" |
||||
|
], |
||||
|
"compilerOptions": { |
||||
|
"composite": true, |
||||
|
"baseUrl": ".", |
||||
|
"paths": { |
||||
|
"@renderer/*": [ |
||||
|
"src/renderer/src/*" |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue