style: optimizing style issues (#4289)

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

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

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

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

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

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

packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue

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

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

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

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

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

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

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

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

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

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

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