style: optimizing style issues (#4289)
Vben
GitHub
parent
071cc0dcec
commit
2b0aedbaba
|
|
@ -36,7 +36,7 @@ You can check the list below to understand all the available variables.
|
|||
--background: 0 0% 100%;
|
||||
|
||||
/* Main area background color */
|
||||
--background-deep: 210 11.11% 96.47%;
|
||||
--background-deep: 216 20.11% 95.47%;
|
||||
--foreground: 210 6% 21%;
|
||||
|
||||
/* Background color for <Card /> */
|
||||
|
|
@ -111,7 +111,7 @@ You can check the list below to understand all the available variables.
|
|||
|
||||
/* menu */
|
||||
--sidebar: 0 0% 100%;
|
||||
--sidebar-deep: 210 11.11% 96.47%;
|
||||
--sidebar-deep: 216 20.11% 95.47%;
|
||||
--menu: var(--sidebar);
|
||||
|
||||
/* header */
|
||||
|
|
@ -330,7 +330,7 @@ type BuiltinThemeType =
|
|||
--background: 0 0% 100%;
|
||||
|
||||
/* Main area background color */
|
||||
--background-deep: 210 11.11% 96.47%;
|
||||
--background-deep: 216 20.11% 95.47%;
|
||||
--foreground: 222 84% 5%;
|
||||
|
||||
/* Background color for <Card /> */
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
|
|||
--background: 0 0% 100%;
|
||||
|
||||
/* 主体区域背景色 */
|
||||
--background-deep: 210 11.11% 96.47%;
|
||||
--background-deep: 216 20.11% 95.47%;
|
||||
--foreground: 210 6% 21%;
|
||||
|
||||
/* Background color for <Card /> */
|
||||
|
|
@ -111,7 +111,7 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
|
|||
|
||||
/* menu */
|
||||
--sidebar: 0 0% 100%;
|
||||
--sidebar-deep: 210 11.11% 96.47%;
|
||||
--sidebar-deep: 216 20.11% 95.47%;
|
||||
--menu: var(--sidebar);
|
||||
|
||||
/* header */
|
||||
|
|
@ -330,7 +330,7 @@ type BuiltinThemeType =
|
|||
--background: 0 0% 100%;
|
||||
|
||||
/* 主体区域背景色 */
|
||||
--background-deep: 210 11.11% 96.47%;
|
||||
--background-deep: 216 20.11% 95.47%;
|
||||
--foreground: 222 84% 5%;
|
||||
|
||||
/* Background color for <Card /> */
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
}
|
||||
|
||||
.card-box {
|
||||
@apply bg-card text-card-foreground border-border rounded-xl border shadow;
|
||||
@apply bg-card text-card-foreground border-border rounded-xl border;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
--background: 0 0% 100%;
|
||||
|
||||
/* 主体区域背景色 */
|
||||
--background-deep: 210 11.11% 96.47%;
|
||||
--background-deep: 216 20.11% 95.47%;
|
||||
--foreground: 210 6% 21%;
|
||||
|
||||
/* Background color for <Card /> */
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
/* ============= custom ============= */
|
||||
|
||||
/* 遮罩颜色 */
|
||||
--overlay: 0 0% 0% / 30%;
|
||||
--overlay: 0 0% 0% / 45%;
|
||||
|
||||
/* 基本文字大小 */
|
||||
--font-size-base: 16px;
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ const defaultPreferences: Preferences = {
|
|||
expandOnHover: true,
|
||||
extraCollapse: true,
|
||||
hidden: false,
|
||||
width: 230,
|
||||
width: 224,
|
||||
},
|
||||
tabbar: {
|
||||
dragable: true,
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ function pointerDownOutside(e: Event) {
|
|||
{
|
||||
'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0':
|
||||
shouldFullscreen,
|
||||
'top-1/2 -translate-y-1/2': centered && !shouldFullscreen,
|
||||
'top-1/2 !-translate-y-1/2': centered && !shouldFullscreen,
|
||||
'duration-300': !dragging,
|
||||
},
|
||||
)
|
||||
|
|
|
|||
|
|
@ -28,12 +28,12 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
});
|
||||
|
||||
const text = computed(() => {
|
||||
return props.alt.slice(0, 2).toUpperCase();
|
||||
return props.alt.slice(-2).toUpperCase();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="props.class" class="relative flex-shrink-0">
|
||||
<div :class="props.class" class="relative flex flex-shrink-0 items-center">
|
||||
<Avatar :class="props.class" class="size-full">
|
||||
<AvatarImage :alt="alt" :src="src" />
|
||||
<AvatarFallback>{{ text }}</AvatarFallback>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
|
|||
<VbenButton
|
||||
v-if="visible"
|
||||
:style="backTopStyle"
|
||||
class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float fixed bottom-10 z-[1000] h-10 w-10 rounded-full duration-500"
|
||||
class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float fixed bottom-10 z-[1000] size-10 rounded-full duration-500"
|
||||
size="icon"
|
||||
variant="icon"
|
||||
@click="handleClick"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
<script lang="ts" setup>
|
||||
import type { IBreadcrumb } from './types';
|
||||
import type { BreadcrumbProps } from './types';
|
||||
|
||||
import { VbenIcon } from '../icon';
|
||||
|
||||
interface Props {
|
||||
breadcrumbs: IBreadcrumb[];
|
||||
showIcon?: boolean;
|
||||
}
|
||||
interface Props extends BreadcrumbProps {}
|
||||
|
||||
defineOptions({ name: 'Breadcrumb' });
|
||||
withDefaults(defineProps<Props>(), {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<script lang="ts" setup>
|
||||
import type { BreadcrumbProps } from './types';
|
||||
|
||||
import { useForwardPropsEmits } from 'radix-vue';
|
||||
|
||||
import Breadcrumb from './breadcrumb.vue';
|
||||
import BreadcrumbBackground from './breadcrumb-background.vue';
|
||||
|
||||
interface Props extends BreadcrumbProps {
|
||||
class?: any;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {});
|
||||
|
||||
const emit = defineEmits<{ select: [string] }>();
|
||||
|
||||
const forward = useForwardPropsEmits(props, emit);
|
||||
</script>
|
||||
<template>
|
||||
<Breadcrumb v-if="styleType === 'normal'" v-bind="forward" />
|
||||
<BreadcrumbBackground v-if="styleType === 'background'" v-bind="forward" />
|
||||
</template>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts" setup>
|
||||
import type { IBreadcrumb } from './types';
|
||||
import type { BreadcrumbProps } from './types';
|
||||
|
||||
import { ChevronDown } from '@vben-core/icons';
|
||||
|
||||
|
|
@ -19,10 +19,7 @@ import {
|
|||
DropdownMenuTrigger,
|
||||
} from '../ui/dropdown-menu';
|
||||
|
||||
interface Props {
|
||||
breadcrumbs: IBreadcrumb[];
|
||||
showIcon?: boolean;
|
||||
}
|
||||
interface Props extends BreadcrumbProps {}
|
||||
|
||||
defineOptions({ name: 'Breadcrumb' });
|
||||
withDefaults(defineProps<Props>(), {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
export { default as VbenBreadcrumb } from './breadcrumb.vue';
|
||||
export { default as VbenBackgroundBreadcrumb } from './breadcrumb-background.vue';
|
||||
export { default as VbenBreadcrumbView } from './breadcrumb-view.vue';
|
||||
|
||||
export type * from './types';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import type { BreadcrumbStyleType } from '@vben-core/typings';
|
||||
|
||||
import type { Component } from 'vue';
|
||||
|
||||
interface IBreadcrumb {
|
||||
export interface IBreadcrumb {
|
||||
icon?: Component | string;
|
||||
isHome?: boolean;
|
||||
items?: IBreadcrumb[];
|
||||
|
|
@ -8,4 +10,8 @@ interface IBreadcrumb {
|
|||
title?: string;
|
||||
}
|
||||
|
||||
export type { IBreadcrumb };
|
||||
export interface BreadcrumbProps {
|
||||
breadcrumbs: IBreadcrumb[];
|
||||
showIcon?: boolean;
|
||||
styleType?: BreadcrumbStyleType;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import { VbenAvatar } from '../avatar';
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* 是否收起文本
|
||||
* @zh_CN 是否收起文本
|
||||
*/
|
||||
collapsed?: boolean;
|
||||
/**
|
||||
* Logo 跳转地址
|
||||
* @zh_CN Logo 跳转地址
|
||||
*/
|
||||
href?: string;
|
||||
/**
|
||||
* Logo 图片大小
|
||||
* @zh_CN Logo 图片大小
|
||||
*/
|
||||
logoSize?: number;
|
||||
/**
|
||||
* Logo 图标
|
||||
* @zh_CN Logo 图标
|
||||
*/
|
||||
src?: string;
|
||||
/**
|
||||
* Logo 文本
|
||||
* @zh_CN Logo 文本
|
||||
*/
|
||||
text: string;
|
||||
/**
|
||||
* Logo 主题
|
||||
* @zh_CN Logo 主题
|
||||
*/
|
||||
theme?: string;
|
||||
}
|
||||
|
|
@ -44,16 +46,18 @@ withDefaults(defineProps<Props>(), {
|
|||
<a
|
||||
:class="$attrs.class"
|
||||
:href="href"
|
||||
class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg font-semibold leading-normal transition-all duration-500"
|
||||
class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500"
|
||||
>
|
||||
<img
|
||||
<VbenAvatar
|
||||
v-if="src"
|
||||
:alt="text"
|
||||
:src="src"
|
||||
:width="logoSize"
|
||||
class="relative rounded-none bg-transparent"
|
||||
class="relative w-8 rounded-none bg-transparent"
|
||||
/>
|
||||
<span v-if="!collapsed" class="text-foreground truncate text-nowrap">
|
||||
<span
|
||||
v-if="!collapsed"
|
||||
class="text-foreground truncate text-nowrap font-semibold"
|
||||
>
|
||||
{{ text }}
|
||||
</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const props = defineProps<{
|
|||
<div
|
||||
:class="
|
||||
cn(
|
||||
'bg-card text-card-foreground border-border rounded-xl border shadow-sm',
|
||||
'bg-card text-card-foreground border-border rounded-xl border',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
|
|
|
|||
|
|
@ -60,9 +60,9 @@ const tabsView = computed((): TabConfig[] => {
|
|||
ref="contentRef"
|
||||
:class="contentClass"
|
||||
:style="style"
|
||||
class="tabs-chrome !flex h-full w-max pr-6"
|
||||
class="tabs-chrome !flex h-full w-max overflow-y-hidden pr-6"
|
||||
>
|
||||
<TransitionGroup name="slide-right">
|
||||
<TransitionGroup name="slide-down">
|
||||
<div
|
||||
v-for="(tab, i) in tabsView"
|
||||
:key="tab.key"
|
||||
|
|
@ -84,7 +84,7 @@ const tabsView = computed((): TabConfig[] => {
|
|||
<!-- divider -->
|
||||
<div
|
||||
v-if="i !== 0 && tab.key !== active"
|
||||
class="tabs-chrome__divider bg-foreground/50 absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
|
||||
class="tabs-chrome__divider bg-border absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
|
||||
></div>
|
||||
<!-- background -->
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -30,14 +30,15 @@ const active = defineModel<string>('active');
|
|||
const typeWithClass = computed(() => {
|
||||
const typeClasses: Record<string, { content: string }> = {
|
||||
brisk: {
|
||||
content: `h-full after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1.5px] after:bg-primary after:scale-x-0 after:transition-[transform] after:ease-out after:duration-300 hover:after:scale-x-100 after:origin-left [&.is-active]:after:scale-x-100 border-l border-border`,
|
||||
content: `h-full after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1.5px] after:bg-primary after:scale-x-0 after:transition-[transform] after:ease-out after:duration-300 hover:after:scale-x-100 after:origin-left [&.is-active]:after:scale-x-100 [&:not(:first-child)]:border-l last:border-r last:border-r border-border`,
|
||||
},
|
||||
card: {
|
||||
content:
|
||||
'h-[calc(100%-6px)] rounded-md ml-2 border border-border transition-all',
|
||||
},
|
||||
plain: {
|
||||
content: 'h-full border-l border-border',
|
||||
content:
|
||||
'h-full [&:not(:first-child)]:border-l last:border-r border-border',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -63,9 +64,9 @@ const tabsView = computed((): TabConfig[] => {
|
|||
<template>
|
||||
<div
|
||||
:class="contentClass"
|
||||
class="relative !flex h-full w-max items-center pr-6"
|
||||
class="relative !flex h-full w-max items-center overflow-y-hidden pr-6"
|
||||
>
|
||||
<TransitionGroup name="slide-right">
|
||||
<TransitionGroup name="slide-down">
|
||||
<div
|
||||
v-for="(tab, i) in tabsView"
|
||||
:key="tab.key"
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const defaultValue = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card-box w-full px-4 pb-5 pt-3 shadow">
|
||||
<div class="card-box w-full px-4 pb-5 pt-3">
|
||||
<Tabs :default-value="defaultValue">
|
||||
<TabsList>
|
||||
<template v-for="tab in tabs" :key="tab.label">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { computed } from 'vue';
|
|||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
import { VbenBackgroundBreadcrumb, VbenBreadcrumb } from '@vben-core/shadcn-ui';
|
||||
import { VbenBreadcrumbView } from '@vben-core/shadcn-ui';
|
||||
|
||||
interface Props {
|
||||
hideWhenOnlyOne?: boolean;
|
||||
|
|
@ -62,17 +62,10 @@ function handleSelect(path: string) {
|
|||
}
|
||||
</script>
|
||||
<template>
|
||||
<VbenBreadcrumb
|
||||
v-if="type === 'normal'"
|
||||
:breadcrumbs="breadcrumbs"
|
||||
:show-icon="showIcon"
|
||||
class="ml-2"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
<VbenBackgroundBreadcrumb
|
||||
v-if="type === 'background'"
|
||||
<VbenBreadcrumbView
|
||||
:breadcrumbs="breadcrumbs"
|
||||
:show-icon="showIcon"
|
||||
:style-type="type"
|
||||
class="ml-2"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue