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

style: improve glassmorphism UI for background adaptability

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:
sagitchu
2026-04-06 10:21:06 +08:00
parent 26013f8dfa
commit 7c1f5ca660
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>