tcjlj/flvx
1
0
Fork 0
mirror of https://github.com/Sagit-chu/flvx.git synced 2026-10-06 18:06:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: improve glassmorphism UI for background adaptability (#420)

Browse Source 
Increase backdrop blur and lower white/black background opacity on inner
elements (tables, charts, tabs). Apply higher blur to admin layout
sidebar and H5 layout navigation bar. Remove solid backgrounds inside
nested cards to inherit background themes.
This commit is contained in:
sagit
2026-04-06 10:23:16 +08:00
committed by GitHub
parent be4b1f5f25 71d5c36ec3
commit 53e1efcdc1
7 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite-frontend/src/layouts/admin.tsx
+7 -8
View File
@@ -373,16 +373,15 @@ export default function AdminLayout({
{/* 左侧菜单栏 */} {/* 左侧菜单栏 */}
<aside <aside
className={` className={`
${isMobile ? "fixed h-screen top-0 left-0 rounded-r-3xl" : "relative h-full rounded-3xl"} ${isMobile ? "fixed h-screen top-0 left-0 rounded-r-3xl" : "relative h-full rounded-3xl"}
${isMobile && !mobileMenuVisible ? "-translate-x-full" : "translate-x-0"} ${isMobile && !mobileMenuVisible ? "-translate-x-full" : "translate-x-0"}
${isMobile ? "w-64" : isCollapsed ? "w-20" : "w-[260px]"} ${isMobile ? "w-64" : isCollapsed ? "w-20" : "w-[260px]"}
bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl
shadow-[0_10px_30px_rgba(0,0,0,0.1)] shadow-[0_10px_30px_rgba(0,0,0,0.1)]
border border-white/80 dark:border-white/10 border border-white/80 dark:border-white/10
z-50 z-50
transition-all duration-300 ease-in-out transition-all duration-300 ease-in-out
flex flex-col flex-shrink-0 flex flex-col flex-shrink-0 `}
`}
> >
{/* Logo 区域 */} {/* Logo 区域 */}
<div className="px-6 py-8 flex items-center overflow-hidden whitespace-nowrap box-border"> <div className="px-6 py-8 flex items-center overflow-hidden whitespace-nowrap box-border">
@@ -531,7 +530,7 @@ export default function AdminLayout({
{isMobile && ( {isMobile && (
<Button <Button
isIconOnly isIconOnly
className="absolute top-4 left-4 z-40 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-md shadow-sm border border-white/80 dark:border-white/10" className="absolute top-4 left-4 z-40 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-md shadow-sm border border-white/80 dark:border-white/10"
variant="flat" variant="flat"
onPress={toggleMobileMenu} onPress={toggleMobileMenu}
> >
vite-frontend/src/layouts/h5-simple.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export default function H5SimpleLayout({
return ( return (
<div className="flex flex-col min-h-screen bg-mesh-gradient"> <div className="flex flex-col min-h-screen bg-mesh-gradient">
{/* 顶部导航栏 */} {/* 顶部导航栏 */}
<header className="bg-white/60 dark:bg-zinc-900/60 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10"> <header className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button isIconOnly size="sm" variant="light" onPress={handleBack}> <Button isIconOnly size="sm" variant="light" onPress={handleBack}>
<BackIcon className="w-5 h-5" /> <BackIcon className="w-5 h-5" />
vite-frontend/src/layouts/h5.tsx
+2 -2
View File
@@ -168,7 +168,7 @@ export default function H5Layout({ children }: { children: React.ReactNode }) {
return ( return (
<div className="flex flex-col min-h-screen bg-mesh-gradient"> <div className="flex flex-col min-h-screen bg-mesh-gradient">
{/* 顶部导航栏 */} {/* 顶部导航栏 */}
<header className="bg-white/60 dark:bg-zinc-900/60 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10"> <header className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<BrandLogo size={20} /> <BrandLogo size={20} />
<h1 className="text-sm font-bold text-foreground"> <h1 className="text-sm font-bold text-foreground">
@@ -186,7 +186,7 @@ export default function H5Layout({ children }: { children: React.ReactNode }) {
<div aria-hidden className="h-[calc(4rem+var(--safe-area-bottom))]" /> <div aria-hidden className="h-[calc(4rem+var(--safe-area-bottom))]" />
{/* 底部Tabbar */} {/* 底部Tabbar */}
<nav className="bg-white/70 dark:bg-zinc-900/70 backdrop-blur-2xl border-t border-white/80 dark:border-white/10 h-[calc(4rem+var(--safe-area-bottom))] flex-shrink-0 flex items-center justify-around px-2 fixed bottom-0 left-0 right-0 z-30"> <nav className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-2xl border-t border-white/80 dark:border-white/10 h-[calc(4rem+var(--safe-area-bottom))] flex-shrink-0 flex items-center justify-around px-2 fixed bottom-0 left-0 right-0 z-30">
{filteredTabItems.map((item) => { {filteredTabItems.map((item) => {
const isActive = location.pathname === item.path; const isActive = location.pathname === item.path;
const isMonitor = item.path === "/monitor"; const isMonitor = item.path === "/monitor";
vite-frontend/src/pages/forward.tsx
+4 -4
View File
@@ -4176,7 +4176,7 @@ export default function ForwardPage() {
{sortedForwards.length} 条规则 {sortedForwards.length} 条规则
</span> </span>
</div> </div>
<Card className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/40 dark:bg-zinc-900/40 backdrop-blur-2xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"> <Card className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
<DndContext <DndContext
collisionDetection={pointerWithin} collisionDetection={pointerWithin}
sensors={sensors} sensors={sensors}
@@ -4329,7 +4329,7 @@ export default function ForwardPage() {
key={`grouped-table-${group.userId}-${group.userName}`} key={`grouped-table-${group.userId}-${group.userName}`}
className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]" className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
> >
<div className="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/40 dark:bg-black/40 backdrop-blur-md px-5 py-4"> <div className="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/20 dark:bg-black/20 backdrop-blur-3xl px-5 py-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm font-semibold text-foreground"> <span className="text-sm font-semibold text-foreground">
{group.userName} {group.userName}
@@ -4415,10 +4415,10 @@ export default function ForwardPage() {
collapsed={collapsed} collapsed={collapsed}
countClassName="text-xs text-default-600" countClassName="text-xs text-default-600"
groupUserId={group.userId} groupUserId={group.userId}
headerClassName="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/40 dark:bg-black/40 backdrop-blur-md px-4 py-2.5" headerClassName="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/20 dark:bg-black/20 backdrop-blur-3xl px-4 py-2.5"
titleClassName="truncate text-sm font-semibold text-default-700" titleClassName="truncate text-sm font-semibold text-default-700"
tunnel={tunnel} tunnel={tunnel}
wrapperClassName="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/40 dark:bg-zinc-900/40 backdrop-blur-2xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]" wrapperClassName="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
onToggleCollapsed={() => onToggleCollapsed={() =>
toggleTunnelGroupCollapsed( toggleTunnelGroupCollapsed(
group.userId, group.userId,
vite-frontend/src/pages/index.tsx
+1 -1
View File
@@ -158,7 +158,7 @@ export default function IndexPage() {
initial={{ opacity: 0, y: 24 }} initial={{ opacity: 0, y: 24 }}
transition={{ duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }} transition={{ duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }}
> >
<Card className="w-full bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_20px_40px_rgba(0,0,0,0.15)] border-white/80 dark:border-white/10 rounded-[32px] p-2 sm:p-4"> <Card className="w-full bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_20px_40px_rgba(0,0,0,0.15)] border-white/80 dark:border-white/10 rounded-[32px] p-2 sm:p-4">
<CardHeader className="pb-0 pt-6 px-6 flex-col items-center"> <CardHeader className="pb-0 pt-6 px-6 flex-col items-center">
<div className="w-14 h-14 bg-primary rounded-2xl flex items-center justify-center mb-4 shadow-sm text-white"> <div className="w-14 h-14 bg-primary rounded-2xl flex items-center justify-center mb-4 shadow-sm text-white">
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
vite-frontend/src/pages/monitor.tsx
+1 -1
View File
@@ -253,7 +253,7 @@ export default function MonitorPage() {
</div> </div>
{/* Tab Switcher */} {/* Tab Switcher */}
<div className="flex items-center gap-1 p-1 rounded-2xl bg-white/40 dark:bg-black/40 backdrop-blur-lg border border-white/50 dark:border-white/10 w-fit shadow-sm"> <div className="flex items-center gap-1 p-1 rounded-2xl bg-white/20 dark:bg-black/20 backdrop-blur-3xl border border-white/50 dark:border-white/10 w-fit shadow-sm">
<button <button
className={`flex items-center gap-1.5 px-5 py-2 rounded-xl text-sm font-semibold transition-all duration-200 ${ className={`flex items-center gap-1.5 px-5 py-2 rounded-xl text-sm font-semibold transition-all duration-200 ${
activeTab === "nodes" activeTab === "nodes"
vite-frontend/src/pages/node/monitor-view.tsx
+1 -1
View File
@@ -1446,7 +1446,7 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {
{/* Active monitor info bar */} {/* Active monitor info bar */}
{resolvedActiveMonitor && ( {resolvedActiveMonitor && (
<div className="flex items-center justify-between gap-3 p-3 rounded-2xl bg-white/40 dark:bg-black/40 backdrop-blur-md border border-white/50 dark:border-white/10 shadow-[0_4px_12px_rgba(0,0,0,0.05)]"> <div className="flex items-center justify-between gap-3 p-3 rounded-2xl bg-white/20 dark:bg-black/20 backdrop-blur-3xl border border-white/50 dark:border-white/10 shadow-[0_4px_12px_rgba(0,0,0,0.05)]">
<div className="flex items-center gap-3 min-w-0 flex-wrap"> <div className="flex items-center gap-3 min-w-0 flex-wrap">
<Chip size="sm" color="primary" variant="flat">{resolvedActiveMonitor.type.toUpperCase()}</Chip> <Chip size="sm" color="primary" variant="flat">{resolvedActiveMonitor.type.toUpperCase()}</Chip>
<span className="font-mono text-xs text-default-500">{resolvedActiveMonitor.target}</span> <span className="font-mono text-xs text-default-500">{resolvedActiveMonitor.target}</span>