mdy/seastem-electronjs
1
0
Fork 0
forked from imbytecat/fullstack-starter
Code Pull Requests Activity

feat(desktop): 迁移启动页到 React 并接入 Motion 动画

Browse Source
This commit is contained in:
imbytecat
2026-02-16 05:10:15 +08:00
parent 5edab0ba1d
commit 93a2519012
12 changed files with 279 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/desktop/electron.vite.config.ts
View File

@@ -1,10 +1,11 @@
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'electron-vite'
export default defineConfig({
main: {},
preload: {},
renderer: {
plugins: [tailwindcss()],
plugins: [react(), tailwindcss()],
},
})

9
apps/desktop/package.json
View File

@@ -15,18 +15,23 @@
"dist:mac:x64": "electron-builder --mac --x64",
"dist:win": "electron-builder --win --x64",
"fix": "biome check --write",
"typecheck": "tsc --noEmit"
"typecheck": "tsc -b"
},
"dependencies": {
"motion": "catalog:",
"react": "catalog:",
"react-dom": "catalog:",
"tree-kill": "catalog:"
},
"devDependencies": {
"@furtherverse/tsconfig": "workspace:*",
"@tailwindcss/vite": "catalog:",
"@types/node": "catalog:",
"@vitejs/plugin-react": "catalog:",
"electron": "catalog:",
"electron-builder": "catalog:",
"electron-vite": "catalog:",
"tailwindcss": "catalog:"
"tailwindcss": "catalog:",
"vite": "catalog:"
}
}

BIN
apps/desktop/src/renderer/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

49
apps/desktop/src/renderer/components/SplashApp.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { motion } from 'motion/react'
import logoImage from '../assets/logo.png'
export const SplashApp = () => {
return (
<main className="m-0 flex h-screen w-screen cursor-default select-none items-center justify-center overflow-hidden bg-white font-sans antialiased">
<motion.section
animate={{ opacity: 1, y: 0 }}
className="flex flex-col items-center gap-8"
initial={{ opacity: 0, y: 4 }}
transition={{
duration: 1,
ease: [0.16, 1, 0.3, 1] as [number, number, number, number],
}}
>
<img
alt="Logo"
className="h-11 w-auto object-contain"
draggable={false}
src={logoImage}
/>
<div className="relative h-[2px] w-24 overflow-hidden rounded-full bg-zinc-100">
<motion.div
animate={{ x: '100%' }}
className="h-full w-full bg-zinc-800"
initial={{ x: '-100%' }}
transition={{
duration: 2,
ease: [0.4, 0, 0.2, 1] as [number, number, number, number],
repeat: Number.POSITIVE_INFINITY,
}}
/>
</div>
<motion.p
animate={{ opacity: [0.35, 0.8, 0.35] }}
className="text-[10px] font-medium uppercase tracking-widest text-zinc-400"
transition={{
duration: 2.8,
repeat: Number.POSITIVE_INFINITY,
}}
>
Starting
</motion.p>
</motion.section>
</main>
)
}

12
apps/desktop/src/renderer/index.html
View File

@@ -4,15 +4,9 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Furtherverse</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body class="bg-white h-screen w-screen flex flex-col items-center justify-center overflow-hidden select-none cursor-default font-sans antialiased m-0">
<div class="flex flex-col items-center gap-8 animate-fade-in">
<h1 class="text-3xl font-medium tracking-tight text-zinc-900">Furtherverse</h1>
<div class="w-24 h-[2px] bg-zinc-100 rounded-full overflow-hidden relative">
<div class="h-full w-full bg-zinc-800 origin-left animate-loading-bar"></div>
</div>
<div class="text-[10px] uppercase tracking-widest text-zinc-400 font-medium animate-pulse-slow">Starting</div>
</div>
<body>
<div id="root"></div>
<script type="module" src="./main.tsx"></script>
</body>
</html>

11
apps/desktop/src/renderer/main.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { SplashApp } from './components/SplashApp'
import './styles.css'
// biome-ignore lint/style/noNonNullAssertion: 一定存在
createRoot(document.getElementById('root')!).render(
<StrictMode>
<SplashApp />
</StrictMode>,
)

39
apps/desktop/src/renderer/styles.css
View File

@@ -1,40 +1 @@
@import "tailwindcss";
@theme {
--animate-fade-in: fade-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
--animate-pulse-slow: pulse-slow 3s ease-in-out infinite;
--animate-loading-bar: loading-bar 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse-slow {
0%,
100% {
opacity: 0.4;
}
50% {
opacity: 0.8;
}
}
@keyframes loading-bar {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}

8
apps/desktop/tsconfig.app.json Normal file
View File

@@ -0,0 +1,8 @@
{
"extends": "@furtherverse/tsconfig/react.json",
"compilerOptions": {
"composite": true,
"types": ["vite/client"]
},
"include": ["src/renderer/**/*"]
}

14
apps/desktop/tsconfig.json
View File

@@ -1,7 +1,11 @@
{
"extends": "@furtherverse/tsconfig/base.json",
"compilerOptions": {
"types": ["node"]
},
"include": ["src/main/**/*", "src/preload/**/*", "electron.vite.config.ts"]
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
]
}

8
apps/desktop/tsconfig.node.json Normal file
View File

@@ -0,0 +1,8 @@
{
"extends": "@furtherverse/tsconfig/base.json",
"compilerOptions": {
"composite": true,
"types": ["node"]
},
"include": ["src/main/**/*", "src/preload/**/*", "electron.vite.config.ts"]
}