refactor(web): generalize blue glass surface utility

This commit is contained in:
yyh 2026-06-25 14:18:30 +08:00
parent 46de0d78d9
commit 7c939ee6c2
No known key found for this signature in database
5 changed files with 5 additions and 5 deletions

View File

@ -23,7 +23,7 @@ import { AppModeEnum } from '@/types/app'
import MainNav from '../index'
import { DETAIL_SIDEBAR_STORAGE_KEY } from '../storage'
const activeGradientMaskClassName = 'aria-[current=page]:main-nav-active-glass'
const activeGradientMaskClassName = 'aria-[current=page]:dify-blue-glass-surface'
const activeStackingClassName = 'aria-[current=page]:z-1'
const { mockIsAgentV2Enabled, mockSwitchWorkspace, mockToastSuccess, hotkeyRegistrations } = vi.hoisted(() => ({

View File

@ -36,7 +36,7 @@ const MainNavLink = ({
className={cn(
'group relative flex h-8 w-full items-center gap-2 rounded-[10px] px-2 py-1.5 outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:ring-inset',
'not-aria-[current=page]:bg-components-main-nav-nav-button-bg not-aria-[current=page]:system-md-medium not-aria-[current=page]:text-components-main-nav-nav-button-text not-aria-[current=page]:hover:bg-components-main-nav-nav-button-bg-hover not-aria-[current=page]:hover:text-components-main-nav-nav-button-text',
'aria-[current=page]:main-nav-active-glass aria-[current=page]:z-1',
'aria-[current=page]:dify-blue-glass-surface aria-[current=page]:z-1',
)}
>
<NavIcon icon={item.icon} className="group-aria-[current=page]:hidden" />

View File

@ -1,4 +1,4 @@
@utility main-nav-active-glass {
@utility dify-blue-glass-surface {
@apply overflow-hidden system-md-semibold text-saas-dify-blue-inverted backdrop-blur-[5px];
background-image: linear-gradient(

View File

@ -28,7 +28,7 @@
@import '../components/base/action-button/index.css';
@import '../components/base/badge/index.css';
@import '../components/base/premium-badge/index.css';
@import '../components/main-nav/components/nav-link.css';
@import './glass-surface.css';
/* ---------- JS plugins ------------------------------------------------ */
@plugin './plugins/icons.ts';

View File

@ -30,7 +30,7 @@ function AgentBuildChatEmptyState({
return (
<div className="flex h-full items-center justify-center">
<div className="flex w-full max-w-150 flex-col items-start p-3 text-left">
<div className="main-nav-active-glass relative flex h-[50px] w-12 items-center justify-center rounded-xl p-2">
<div className="dify-blue-glass-surface relative flex h-[50px] w-12 items-center justify-center rounded-xl p-2">
<div className="absolute inset-x-px inset-y-0.5 grid grid-cols-[repeat(8,4px)] grid-rows-[repeat(8,4px)] gap-0.5 opacity-25">
{buildIconGridCells.map(cell => (
<span