feat: 为 desktop/server 添加 Tailwind CSS 支持和 Biome 集成
- desktop renderer 接入 @tailwindcss/vite，loading 页面改用 Tailwind 类 - 两个 app 添加 biome.json 继承配置：tailwindDirectives + useSortedClasses
This commit is contained in:
16
apps/desktop/biome.json
Normal file
16
apps/desktop/biome.json
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"$schema": "../../node_modules/@biomejs/biome/configuration_schema.json",
|
||||||
|
"extends": "//",
|
||||||
|
"css": {
|
||||||
|
"parser": {
|
||||||
|
"tailwindDirectives": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"linter": {
|
||||||
|
"rules": {
|
||||||
|
"nursery": {
|
||||||
|
"useSortedClasses": "warn"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,7 +1,10 @@
|
|||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
import { defineConfig } from 'electron-vite'
|
import { defineConfig } from 'electron-vite'
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
main: {},
|
main: {},
|
||||||
preload: {},
|
preload: {},
|
||||||
renderer: {},
|
renderer: {
|
||||||
|
plugins: [tailwindcss()],
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -15,9 +15,11 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@furtherverse/tsconfig": "workspace:*",
|
"@furtherverse/tsconfig": "workspace:*",
|
||||||
|
"@tailwindcss/vite": "catalog:",
|
||||||
"@types/node": "catalog:",
|
"@types/node": "catalog:",
|
||||||
"electron": "catalog:",
|
"electron": "catalog:",
|
||||||
"electron-builder": "catalog:",
|
"electron-builder": "catalog:",
|
||||||
"electron-vite": "catalog:"
|
"electron-vite": "catalog:",
|
||||||
|
"tailwindcss": "catalog:"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,37 +4,16 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Furtherverse</title>
|
<title>Furtherverse</title>
|
||||||
<style>
|
<link rel="stylesheet" href="./styles.css" />
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
background: #0a0a0a;
|
|
||||||
color: #fafafa;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
.loader {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.spinner {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border: 3px solid #333;
|
|
||||||
border-top-color: #fafafa;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 0.8s linear infinite;
|
|
||||||
margin: 0 auto 16px;
|
|
||||||
}
|
|
||||||
@keyframes spin { to { transform: rotate(360deg); } }
|
|
||||||
p { font-size: 14px; color: #888; }
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="m-0 h-screen bg-[#050505] text-white font-sans flex flex-col items-center justify-center overflow-hidden cursor-default select-none">
|
||||||
<div class="loader">
|
<div class="absolute w-[80vw] h-[80vw] bg-[radial-gradient(circle,rgba(255,255,255,0.06)_0%,transparent_60%)] rounded-full animate-breathe pointer-events-none"></div>
|
||||||
<div class="spinner"></div>
|
<div class="flex flex-col items-center gap-7 z-10 animate-appear">
|
||||||
<p>Starting server…</p>
|
<h1 class="m-0 text-[32px] font-medium tracking-[-0.03em] bg-[linear-gradient(to_bottom_right,#ffffff_30%,#a1a1aa)] bg-clip-text text-transparent">Furtherverse</h1>
|
||||||
|
<div class="w-30 h-px bg-white/8 rounded-[1px] overflow-hidden relative">
|
||||||
|
<div class="absolute inset-y-0 left-0 w-2/5 bg-[linear-gradient(90deg,transparent,#fff,transparent)] animate-slide opacity-60"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[11px] uppercase tracking-[0.2em] text-zinc-600 font-medium animate-pulse-subtle">Starting</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
49
apps/desktop/src/renderer/styles.css
Normal file
49
apps/desktop/src/renderer/styles.css
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--animate-breathe: breathe 8s ease-in-out infinite alternate;
|
||||||
|
--animate-slide: slide 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||||
|
--animate-appear: appear 1s ease-out 0.2s both;
|
||||||
|
--animate-pulse-subtle: pulse-subtle 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes breathe {
|
||||||
|
from {
|
||||||
|
transform: scale(0.95);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(1.05);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-150%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(350%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes appear {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-subtle {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -3,5 +3,17 @@
|
|||||||
"extends": "//",
|
"extends": "//",
|
||||||
"files": {
|
"files": {
|
||||||
"includes": ["**", "!**/routeTree.gen.ts"]
|
"includes": ["**", "!**/routeTree.gen.ts"]
|
||||||
|
},
|
||||||
|
"css": {
|
||||||
|
"parser": {
|
||||||
|
"tailwindDirectives": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"linter": {
|
||||||
|
"rules": {
|
||||||
|
"nursery": {
|
||||||
|
"useSortedClasses": "warn"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
2
bun.lock
2
bun.lock
@@ -15,10 +15,12 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@furtherverse/tsconfig": "workspace:*",
|
"@furtherverse/tsconfig": "workspace:*",
|
||||||
|
"@tailwindcss/vite": "catalog:",
|
||||||
"@types/node": "catalog:",
|
"@types/node": "catalog:",
|
||||||
"electron": "catalog:",
|
"electron": "catalog:",
|
||||||
"electron-builder": "catalog:",
|
"electron-builder": "catalog:",
|
||||||
"electron-vite": "catalog:",
|
"electron-vite": "catalog:",
|
||||||
|
"tailwindcss": "catalog:",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
"apps/server": {
|
"apps/server": {
|
||||||
|
|||||||
Reference in New Issue
Block a user