JayXiao718/fullstack-starter
1
0
Fork 0
forked from imbytecat/fullstack-starter
Code Pull Requests Activity

feat: 为 desktop/server 添加 Tailwind CSS 支持和 Biome 集成

Browse Source 
- desktop renderer 接入 @tailwindcss/vite，loading 页面改用 Tailwind 类
- 两个 app 添加 biome.json 继承配置：tailwindDirectives + useSortedClasses
This commit is contained in:
imbytecat
2026-02-08 19:17:53 +08:00
parent 6cc1bc6834
commit d69a573a33
7 changed files with 95 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,37 +4,16 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Furtherverse</title>
<style>
* { 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>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="loader">
<div class="spinner"></div>
<p>Starting server…</p>
<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="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="flex flex-col items-center gap-7 z-10 animate-appear">
<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>
</body>
</html>

49
apps/desktop/src/renderer/styles.css Normal file
View 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;
}
}