yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: style optimization

pull/48/MERGE
vince 2024-07-16 23:13:03 +08:00
parent c2c32332d3
commit 8b6d3a72e8
7 changed files with 38 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/@core/shared/design/src/css/global.css
View File

@ -41,6 +41,7 @@
body {
min-height: 100vh;
overflow: overlay;
-webkit-font-smoothing: antialiased;
}
@ -88,6 +89,20 @@
input[type='number']::-webkit-outer-spin-button {
@apply m-0 appearance-none;
}
/* 考虑只在mac下打开 */
/* *::-webkit-scrollbar {
@apply h-[1px] w-[10px];
}
*::-webkit-scrollbar-thumb {
@apply bg-border rounded-sm border-none;
}
*::-webkit-scrollbar-track {
@apply rounded-sm border-none bg-transparent shadow-none;
} */
}
@layer components {

2
packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
View File

@ -26,7 +26,7 @@ const style = computed((): CSSProperties => {
<template>
<section
:style="style"
class="border-border bg-background flex w-full border-b transition-all duration-[100ms]"
class="border-border bg-background flex w-full border-b transition-all"
>
<slot></slot>
</section>

2
packages/@core/ui-kit/layout-ui/src/vben-layout.vue
View File

@ -553,7 +553,7 @@ function handleOpenMenu() {
<div
v-if="maskVisible"
:style="maskStyle"
class="fixed left-0 top-0 h-full w-full bg-[rgb(0_0_0_/_40%)] transition-[background-color] duration-200"
class="bg-overlay fixed left-0 top-0 h-full w-full transition-[background-color] duration-200"
@click="handleClickMask"
></div>
</div>

26
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
View File

@ -84,9 +84,9 @@ function scrollIntoView() {
<div
ref="contentRef"
:class="contentClass"
class="relative !flex h-[calc(100%-2px)] w-max"
class="relative !flex h-full w-max"
>
<TransitionGroup name="slide-up">
<TransitionGroup name="slide-left">
<div
v-for="(tab, i) in tabsView"
:key="tab.key"
@ -120,17 +120,17 @@ function scrollIntoView() {
class="tabs-chrome__background absolute z-[1] size-full px-[calc(var(--gap)-1px)] py-0 transition-opacity duration-150"
>
<div
class="tabs-chrome__background-content h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150"
class="tabs-chrome__background-content group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-accent h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150"
></div>
<svg
class="tabs-chrome__background-before absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150"
class="tabs-chrome__background-before group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150"
height="7"
width="7"
>
<path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
</svg>
<svg
class="tabs-chrome__background-after absolute bottom-0 right-[-1px] fill-transparent transition-all duration-150"
class="tabs-chrome__background-after group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent absolute bottom-0 right-[-1px] fill-transparent transition-all duration-150"
height="7"
width="7"
>
@ -150,19 +150,19 @@ function scrollIntoView() {
v-show="
!tab.affixTab && tabsView.length > 1 && tab.closable
"
class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3 cursor-pointer rounded-full transition-all"
class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3 cursor-pointer rounded-full transition-all"
@click.stop="handleClose(tab.key)"
/>
<MdiPin
v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
@click.stop="handleUnpinTab(tab)"
/>
</div>
<!-- tab-item-main -->
<div
class="tabs-chrome__item-main group-[.is-active]:text-primary text-accent-foreground absolute left-0 right-0 z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 duration-150 group-hover:pr-3"
class="tabs-chrome__item-main group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground text-accent-foreground absolute left-0 right-0 z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 duration-150 group-hover:pr-3"
>
<VbenIcon
v-if="showIcon"
@ -214,7 +214,7 @@ function scrollIntoView() {
.tabs-chrome__background {
&-content {
@apply bg-primary/10 mx-1 rounded-md pb-2;
@apply bg-accent mx-1 rounded-md pb-2;
}
&-before,
@ -236,14 +236,14 @@ function scrollIntoView() {
.tabs-chrome__background {
@apply opacity-100;
&-content {
@apply bg-primary/15;
/* &-content {
@apply bg-accent;
}
&-before,
&-after {
@apply fill-primary/15;
}
@apply fill-heavy;
} */
}
}
}

10
packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
View File

@ -85,13 +85,13 @@ function scrollIntoView() {
:class="contentClass"
class="relative !flex h-full w-max items-center"
>
<TransitionGroup name="slide-up">
<TransitionGroup name="slide-left">
<div
v-for="(tab, i) in tabsView"
:key="tab.key"
:class="[
{
'is-active bg-primary/15': tab.key === active,
'is-active dark:bg-accent bg-primary/15': tab.key === active,
dragable: !tab.affixTab,
},
typeWithClass.content,
@ -119,19 +119,19 @@ function scrollIntoView() {
v-show="
!tab.affixTab && tabsView.length > 1 && tab.closable
"
class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground group-[.is-active]:text-primary size-3 cursor-pointer rounded-full transition-all"
class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground group-[.is-active]:text-primary size-3 cursor-pointer rounded-full transition-all"
@click.stop="handleClose(tab.key)"
/>
<MdiPin
v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
class="hover:bg-heavy hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
@click.stop="handleUnpinTab(tab)"
/>
</div>
<!-- tab-item-main -->
<div
class="group-[.is-active]:text-primary text-accent-foreground mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300"
class="text-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300"
>
<!-- <div
class="mx-3 ml-3 mr-2 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] transition-all duration-300 group-hover:mr-2 group-hover:pr-4 group-[.is-active]:pr-4"

1
packages/effects/layouts/src/basic/layout.vue
View File

@ -258,6 +258,7 @@ function clearPreferencesAndLogout() {
<LayoutTabbar
v-if="preferences.tabbar.enable"
:show-icon="preferences.tabbar.showIcon"
:theme="theme"
/>
</template>

3
packages/effects/layouts/src/basic/tabbar/tabbar.vue
View File

@ -12,7 +12,7 @@ defineOptions({
name: 'LayoutTabbar',
});
defineProps<{ showIcon?: boolean }>();
defineProps<{ showIcon?: boolean; theme?: string }>();
const coreTabbarStore = useCoreTabbarStore();
@ -40,6 +40,7 @@ if (!preferences.tabbar.persist) {
<template>
<TabsView
:active="currentActive"
:class="theme"
:context-menus="createContextMenus"
:dragable="preferences.tabbar.dragable"
:show-icon="showIcon"