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

37
easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import type { TabDefinition } from '@easyflow-core/typings';
import type {TabDefinition} from '@easyflow-core/typings';
import type { TabConfig, TabsProps } from '../../types';
import type {TabConfig, TabsProps} from '../../types';
import { computed, ref } from 'vue';
import {computed, ref} from 'vue';
import { Pin, X } from '@easyflow-core/icons';
import { EasyFlowContextMenu, EasyFlowIcon } from '@easyflow-core/shadcn-ui';
import {Pin, X} from '@easyflow-core/icons';
import {EasyFlowContextMenu, EasyFlowIcon} from '@easyflow-core/shadcn-ui';
interface Props extends TabsProps {}
@@ -110,7 +110,8 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
class="tabs-chrome__background absolute inset-0 z-[-1] px-0 py-0 transition-opacity duration-150"
>
<div
class="tabs-chrome__background-content h-[calc(100%-8px)] rounded-2xl bg-transparent transition-all duration-150 group-[.is-active]:bg-[hsl(var(--glass-tint))/0.74] group-[.is-active]:shadow-[0_16px_28px_-24px_hsl(var(--foreground)/0.34)]"
:class="{ 'is-active': tab.key === active }"
class="tabs-chrome__background-content h-[calc(100%-8px)] rounded-2xl bg-transparent transition-all duration-150"
></div>
</div>
@@ -141,7 +142,9 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
class="mr-2 flex size-[15px] items-center overflow-hidden"
/>
<span class="flex-1 overflow-hidden whitespace-nowrap text-[13px]">
<span
class="flex-1 overflow-hidden whitespace-nowrap text-[13px]"
>
{{ tab.title }}
</span>
</div>
@@ -154,6 +157,26 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<style scoped>
.tabs-chrome {
&__background-content {
position: relative;
overflow: visible;
}
&__background-content.is-active::before {
position: absolute;
inset: 1px -5px -1px;
content: '';
background: hsl(var(--background));
border-radius: 15px 15px 0 0;
border-top: 2px solid hsl(var(--primary) / 0.38);
border-right: 1px solid hsl(var(--primary) / 0.16);
border-left: 1px solid hsl(var(--primary) / 0.16);
}
&__background-content.is-active::after {
display: none;
}
&__item:not(.dragging) {
@apply cursor-pointer;

18
easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
View File

@@ -1,13 +1,13 @@
<script setup lang="ts">
import type { TabsEmits, TabsProps } from './types';
import type {TabsEmits, TabsProps} from './types';
import { useForwardPropsEmits } from '@easyflow-core/composables';
import { ChevronLeft, ChevronRight } from '@easyflow-core/icons';
import { EasyFlowScrollbar } from '@easyflow-core/shadcn-ui';
import {useForwardPropsEmits} from '@easyflow-core/composables';
import {ChevronLeft, ChevronRight} from '@easyflow-core/icons';
import {EasyFlowScrollbar} from '@easyflow-core/shadcn-ui';
import { Tabs, TabsChrome } from './components';
import { useTabsDrag } from './use-tabs-drag';
import { useTabsViewScroll } from './use-tabs-view-scroll';
import {Tabs, TabsChrome} from './components';
import {useTabsDrag} from './use-tabs-drag';
import {useTabsViewScroll} from './use-tabs-view-scroll';
interface Props extends TabsProps {}
@@ -56,7 +56,7 @@ useTabsDrag(props, emit);
'cursor-pointer text-[hsl(var(--nav-item-muted-foreground))] hover:bg-[hsl(var(--surface-contrast-soft))] hover:text-foreground': !scrollIsAtLeft,
'pointer-events-none opacity-30': scrollIsAtLeft,
}"
class="mx-1 my-1 flex items-center rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.44] px-2 shadow-[0_10px_24px_-24px_hsl(var(--foreground)/0.3)] backdrop-blur-xl transition-[background-color,color,transform]"
class="mx-1 my-1 flex items-center rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.18] px-2 shadow-none backdrop-blur-xl transition-[background-color,color,transform]"
@click="scrollDirection('left')"
>
<ChevronLeft class="size-4 h-full" />
@@ -97,7 +97,7 @@ useTabsDrag(props, emit);
'cursor-pointer text-[hsl(var(--nav-item-muted-foreground))] hover:bg-[hsl(var(--surface-contrast-soft))] hover:text-foreground': !scrollIsAtRight,
'pointer-events-none opacity-30': scrollIsAtRight,
}"
class="mx-1 my-1 flex items-center rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.44] px-2 shadow-[0_10px_24px_-24px_hsl(var(--foreground)/0.3)] backdrop-blur-xl transition-[background-color,color,transform]"
class="mx-1 my-1 flex items-center rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.18] px-2 shadow-none backdrop-blur-xl transition-[background-color,color,transform]"
@click="scrollDirection('right')"
>
<ChevronRight class="size-4 h-full" />