by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(other): The menu supports jumping to external links and fixing some known problems

Browse Source
This commit is contained in:
vben
2024-05-21 21:45:48 +08:00
parent 399334ac57
commit c31d21be50
43 changed files with 505 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/@vben-core/uikit/tabs-ui/src/components/tabs.vue
View File

@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits<{ close: [string]; unPushPin: [TabItem] }>();
const gap = 7;
const gap = 6;
const active = defineModel<string>('active');
const { b, e, is } = useNamespace('tabs-ui');

31
packages/@vben-core/uikit/tabs-ui/src/styles/tabs.scss
View File

@@ -2,7 +2,7 @@
@include b('tabs-ui') {
--tabs-background: hsl(var(--color-background));
--tabs-gap: 8px;
--tabs-gap: 10px;
--tabs-divider: hsl(var(--color-border));
--tabs-hover: hsl(var(--color-heavy));
--tabs-active-background: hsl(var(--color-primary) / 15%);
@@ -30,7 +30,6 @@
color: hsl(var(--color-muted-foreground));
cursor: pointer;
user-select: none;
// mask-image: linear-gradient(to right, #000 calc(100% - 0px), transparent);
@include is('active') {
z-index: 1;
@@ -49,10 +48,10 @@
background-color: var(--tabs-active-background);
}
// .#{$namespace}-tab-background__before,
// .#{$namespace}-tab-background__after {
// fill: var(--tabs-active-background);
// }
.#{$namespace}-tab-background__before,
.#{$namespace}-tab-background__after {
fill: var(--tabs-active-background);
}
}
@include e('content') {
@@ -95,7 +94,7 @@
height: 100%;
font-size: 12px;
border-radius: 50%;
// transition: all 0.15s ease;
transition: all 0.15s ease;
&:hover {
color: hsl(var(--color-foreground));
@@ -185,15 +184,15 @@
height: 100%;
margin: 0 7px;
&::before {
position: absolute;
top: 20%;
right: 100%;
width: 1px;
height: 60%;
content: '';
background-color: var(--tabs-divider);
}
// &::before {
// position: absolute;
// top: 20%;
// right: 100%;
// width: 1px;
// height: 60%;
// content: '';
// background-color: var(--tabs-divider);
// }
// &::after {
// position: absolute;