style: optimizing style issues (#4289)

docs/src/en/guide/in-depth/theme.md

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

docs/src/guide/in-depth/theme.md

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

packages/@core/base/design/src/css/global.css

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

packages/@core/base/design/src/design-tokens/default/index.css

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

packages/@core/preferences/src/config.ts

@@ -70,7 +70,7 @@ const defaultPreferences: Preferences = {
     expandOnHover: true,
     extraCollapse: true,
     hidden: false,
-    width: 230,
+    width: 224,
   },
   tabbar: {
     dragable: true,

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

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

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

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

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

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

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

packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue

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

packages/effects/layouts/src/widgets/breadcrumb.vue

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