bichangxiong/ruoyi-plus-vben5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: optimizing style issues (#4289)

Browse Source
This commit is contained in:
Vben
2024-08-31 14:11:01 +08:00
committed by GitHub
parent 071cc0dcec
commit 2b0aedbaba
19 changed files with 77 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/@core/ui-kit/popup-ui/src/modal/modal.vue
View File

@@ -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,
},
)

4
packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
View File

@@ -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>

2
packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
View File

@@ -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"

7
packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
View File

@@ -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>(), {

22
packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue Normal file
View File

@@ -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>

7
packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
View File

@@ -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>(), {

3
packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/index.ts
View File

@@ -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';

10
packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
View File

@@ -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;
}

26
packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
View File

@@ -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>

2
packages/@core/ui-kit/shadcn-ui/src/components/ui/card/Card.vue
View File

@@ -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,
)
"

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

@@ -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

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

@@ -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"