EasyFlow-Tech-Dev/EasyFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 重构并美化整体UI

Browse Source
This commit is contained in:
陈子默
2026-03-07 21:04:54 +08:00
parent 887718d255
commit 6dcc6ce893
14 changed files with 290 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { BreadcrumbProps } from './types';
import type {BreadcrumbProps} from './types';
import { ChevronDown } from '@easyflow-core/icons';
import {ChevronDown} from '@easyflow-core/icons';
import {
Breadcrumb,
@@ -15,7 +15,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from '../../ui';
import { EasyFlowIcon } from '../icon';
import {EasyFlowIcon} from '../icon';
interface Props extends BreadcrumbProps {}
@@ -45,7 +45,11 @@ function handleClick(path?: string) {
<div v-if="item.items?.length ?? 0 > 0">
<DropdownMenu>
<DropdownMenuTrigger class="easyflow-breadcrumb__link">
<EasyFlowIcon v-if="showIcon" :icon="item.icon" class="size-4" />
<EasyFlowIcon
v-if="showIcon"
:icon="item.icon"
class="size-4"
/>
<span class="max-w-[180px] truncate">{{ item.title }}</span>
<ChevronDown class="size-3.5" />
</DropdownMenuTrigger>
@@ -77,10 +81,7 @@ function handleClick(path?: string) {
<span class="max-w-[180px] truncate">{{ item.title }}</span>
</div>
</BreadcrumbLink>
<BreadcrumbPage
v-else
class="easyflow-breadcrumb__current"
>
<BreadcrumbPage v-else class="easyflow-breadcrumb__current">
<div class="flex items-center">
<EasyFlowIcon
v-if="showIcon"
@@ -130,23 +131,55 @@ function handleClick(path?: string) {
}
.easyflow-breadcrumb__current {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 0;
padding: 4px 10px;
padding: 4px 8px 6px;
color: hsl(var(--breadcrumb-current));
font-weight: 600;
letter-spacing: 0.01em;
isolation: isolate;
}
.easyflow-breadcrumb__current::before {
position: absolute;
inset: -8px -10px -2px;
z-index: -1;
content: '';
background: linear-gradient(
135deg,
hsl(var(--nav-item-active) / 0.88),
hsl(var(--glass-tint) / 0.92)
180deg,
hsl(var(--nav-item-active) / 0.36) 0%,
hsl(var(--nav-item-active) / 0.18) 42%,
hsl(var(--glass-tint) / 0.08) 82%,
transparent 100%
);
border-radius: 999px;
border-radius: 14px 14px 10px 10px;
box-shadow:
inset 0 1px 0 hsl(var(--nav-sheen) / 0.42),
0 10px 22px -18px hsl(var(--primary) / 0.22);
inset 1px 0 0 hsl(var(--nav-border) / 0.54),
inset -1px 0 0 hsl(var(--nav-border) / 0.54),
inset 0 1px 0 hsl(var(--nav-sheen) / 0.68),
0 10px 22px -22px hsl(var(--primary) / 0.2);
}
.easyflow-breadcrumb__current::after {
position: absolute;
right: -6px;
bottom: 0;
left: -6px;
height: 1px;
z-index: -1;
content: '';
background: linear-gradient(
90deg,
transparent,
hsl(var(--nav-item-active) / 0.2) 22%,
hsl(var(--nav-item-active) / 0.26) 50%,
hsl(var(--nav-item-active) / 0.2) 78%,
transparent
);
opacity: 0.72;
}
.easyflow-breadcrumb__separator {