awaioi/MiragenFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(code): 格式化代码缩进和布局样式

Browse Source 
- 统一调整 admin.ts 文件中的接口定义缩进格式
- 优化 animated-theme-toggler.tsx 组件的代码结构和缩进
- 规范 app-config-modal.tsx 中 JSX 元素的嵌套格式
- 整理 app-providers.tsx 中的组件层级缩进
- 标准化 app-theme.ts 中的对象属性缩进格式
This commit is contained in:
HouYunFei
2026-05-22 23:19:25 +08:00
parent cee08cb5a8
commit e319481976
93 changed files with 11405 additions and 10423 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/image-generation-pending.tsx
+31 -31
View File
@@ -9,39 +9,39 @@ import { cn } from "@/lib/utils";
const pendingMessages = ["正在创建图片", "马上就好了", "再等等", "正在整理细节"];
export function ImageGenerationPending({ className, label, compact = false }: { className?: string; label?: string; compact?: boolean }) {
const [tick, setTick] = useState(0);
const [tick, setTick] = useState(0);
useEffect(() => {
const timer = window.setInterval(() => setTick((value) => value + 1), 1000);
return () => window.clearInterval(timer);
}, []);
useEffect(() => {
const timer = window.setInterval(() => setTick((value) => value + 1), 1000);
return () => window.clearInterval(timer);
}, []);
const index = Math.floor(tick / 2) % pendingMessages.length;
const progress = Math.min(98, 10 + (1 - Math.exp(-tick / 28)) * 88);
const index = Math.floor(tick / 2) % pendingMessages.length;
const progress = Math.min(98, 10 + (1 - Math.exp(-tick / 28)) * 88);
return (
<div className={cn("relative overflow-hidden bg-stone-100 dark:bg-white/10", compact ? "min-h-24" : "aspect-[4/3]", className)}>
<div
className="absolute inset-0 opacity-60"
style={{
backgroundImage: "radial-gradient(circle, rgba(120,113,108,0.35) 1.4px, transparent 1.6px)",
backgroundSize: "16px 16px",
maskImage: "radial-gradient(ellipse at 38% 68%, black 0%, black 28%, transparent 60%)",
}}
/>
<div className="absolute left-4 top-4 flex items-center gap-2 text-[15px] font-medium text-stone-500 dark:text-stone-300">
<LoaderCircle className="size-4 animate-spin" />
<span>{label || pendingMessages[index]}</span>
</div>
<div className="absolute bottom-4 left-4 right-4">
<div className="mb-2 flex items-center justify-between text-xs text-stone-500 dark:text-stone-400">
<span>{formatDuration(tick * 1000)}</span>
<span>{Math.floor(progress)}%</span>
return (
<div className={cn("relative overflow-hidden bg-stone-100 dark:bg-white/10", compact ? "min-h-24" : "aspect-[4/3]", className)}>
<div
className="absolute inset-0 opacity-60"
style={{
backgroundImage: "radial-gradient(circle, rgba(120,113,108,0.35) 1.4px, transparent 1.6px)",
backgroundSize: "16px 16px",
maskImage: "radial-gradient(ellipse at 38% 68%, black 0%, black 28%, transparent 60%)",
}}
/>
<div className="absolute left-4 top-4 flex items-center gap-2 text-[15px] font-medium text-stone-500 dark:text-stone-300">
<LoaderCircle className="size-4 animate-spin" />
<span>{label || pendingMessages[index]}</span>
</div>
<div className="absolute bottom-4 left-4 right-4">
<div className="mb-2 flex items-center justify-between text-xs text-stone-500 dark:text-stone-400">
<span>{formatDuration(tick * 1000)}</span>
<span>{Math.floor(progress)}%</span>
</div>
<div className="h-1.5 rounded-full bg-stone-300/70 dark:bg-white/12">
<div className="h-full rounded-full bg-stone-900 dark:bg-stone-100" style={{ width: `${progress}%` }} />
</div>
</div>
</div>
<div className="h-1.5 rounded-full bg-stone-300/70 dark:bg-white/12">
<div className="h-full rounded-full bg-stone-900 dark:bg-stone-100" style={{ width: `${progress}%` }} />
</div>
</div>
</div>
);
);
}