chore: update deps

2024-05-28 23:38:36 +08:00
parent f2644dbbc5
commit 11a36ef03f
32 changed files with 327 additions and 274 deletions
--- a/packages/@vben-core/shared/design-tokens/src/dark/index.scss
+++ b/packages/@vben-core/shared/design-tokens/src/dark/index.scss
@@ -3,7 +3,7 @@

  /* --color-background: 240 6% 18%; */
  // --color-body: 220deg 13.04% 8%;
-  --color-body: 220deg 13.04% 8%;
+  // --color-body: hsl(240deg 11% 4%);
  --color-background: 220deg 13.04% 8%;

  /* --color-background: 219 42% 11%; */
@@ -76,20 +76,4 @@

  /* 基本圆角大小 */
  --radius-base: 0.5rem;
-
-  /* ======================================== */
-
-  /* =============component & UI============= */
-
-  /* ======================================== */
-
-  /* --color-login-background: 219 42% 11%; */
-
-  /* 图标颜色 */
-
-  /* authentication */
-  --color-authentication-from: hsl(240deg 11% 6%);
-  --color-authentication-to: hsl(240deg 11% 6%);
-
-  color-scheme: dark;
 }
--- a/packages/@vben-core/shared/design-tokens/src/default/index.scss
+++ b/packages/@vben-core/shared/design-tokens/src/default/index.scss
@@ -1,13 +1,9 @@
 /* https://gavin-yyc.github.io/colorconvert/ */
 :root {
-  --font-geist-sans: 'geist-sans', -apple-system, blinkmacsystemfont, 'Segoe UI',
-    roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol';
-
  /* 基础背景颜色颜色 */

  /* --color-background: 210deg 25% 96.86%; */
-  --color-body: 210deg 25% 96.86%;
+  // --color-main: 210deg 25% 96.86%;
  --color-background: 0 0 100%;
  // --color-darken-background: 220deg 13.04% 8%;

@@ -86,8 +82,6 @@

  /* ======================================== */

-  /* --color-login-background: 0 0 100%; */
-
  /* menu */
  --color-menu-dark: 225deg 12% 13%;
  --color-menu-dark-darken: 223deg 11% 10%;
@@ -96,8 +90,4 @@
  --color-menu: 0deg 0% 100%;
  --color-menu-darken: 0deg 0% 95%;
  // --color-menu-opened: 0deg 0% 100%;
-
-  /* authentication */
-  --color-authentication-from: hsl(231deg 61% 44%);
-  --color-authentication-to: hsl(218deg 70% 42%);
 }
--- a/packages/@vben-core/shared/design/src/scss/common/base.scss
+++ b/packages/@vben-core/shared/design/src/scss/common/base.scss
@@ -10,29 +10,26 @@ html {
 *,
 ::after,
 ::before {
+  @apply border-border;
+
  box-sizing: border-box;
-  border-color: hsl(var(--color-border));
  border-style: solid;
  border-width: 0;
 }

-body.invert {
-  filter: invert(100%);
+body.invert-mode {
+  @apply invert;
 }

-body.grayscale {
-  --tw-grayscale: grayscale(100%);
-
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
-    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
-    var(--tw-sepia) var(--tw-drop-shadow);
+body.grayscale-mode {
+  @apply grayscale;
 }

 html {
-  font-size: var(--font-size-base);
+  @apply text-foreground bg-background;
+
+  // font-size: 62.5%;
  font-variation-settings: normal;
-  color: hsl(var(--color-foreground));
-  background-color: hsl(var(--color-background));
  text-size-adjust: 100%;
  font-synthesis-weight: none;
  scroll-behavior: smooth;
@@ -73,7 +70,7 @@ html.dark::view-transition-new(root) {

 input::placeholder,
 textarea::placeholder {
-  color: hsl(var(--color-input-placeholder)) !important;
+  // color: hsl(var(--color-input-placeholder)) !important;
  opacity: 1;
 }

--- a/packages/@vben-core/shared/design/src/scss/index.scss
+++ b/packages/@vben-core/shared/design/src/scss/index.scss
@@ -1,8 +1,4 @@
 /** css 样式重置 */
@import 'modern-normalize/modern-normalize.css';
-
-/** 元素进入动画 */
-@import './common/entry';
@import './common/base';
@import './transition';
-@import './nprogress';
--- a/packages/@vben-core/shared/design/src/tailwind.css
+++ b/packages/@vben-core/shared/design/src/tailwind.css
@@ -1,21 +1,15 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
@layer base {
  html {
    @apply font-sans;
  }
 }
-@layer components {
-  .flex-center {
-    @apply flex items-center justify-center;
-  }
-  .flex-col-center {
-    @apply flex flex-col items-center justify-center;
-  }
-  .outline-box {
-    @apply outline-border relative  cursor-pointer rounded-md p-1 outline outline-1;

+@layer components {
+  .outline-box {
    &:after {
      @apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[''];
    }
--- a/packages/@vben-core/uikit/layout-ui/package.json
+++ b/packages/@vben-core/uikit/layout-ui/package.json
@@ -46,7 +46,7 @@
    "@vben-core/shadcn-ui": "workspace:*",
    "@vben-core/toolkit": "workspace:*",
    "@vben-core/typings": "workspace:*",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
    "vue": "3.4.27"
  }
 }
--- a/packages/@vben-core/uikit/layout-ui/src/components/layout-header.vue
+++ b/packages/@vben-core/uikit/layout-ui/src/components/layout-header.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { IcRoundMenu } from '@vben-core/iconify';
 import { VbenIconButton } from '@vben-core/shadcn-ui';
-import { useNamespace } from '@vben-core/toolkit';

 import type { CSSProperties } from 'vue';

@@ -82,8 +81,6 @@ const emit = defineEmits<{ openMenu: []; toggleMenu: [] }>();

 const slots = useSlots();

-const { b, e } = useNamespace('header');
-
 const style = computed((): CSSProperties => {
  const { backgroundColor, fullWidth, height, show } = props;
  const right = !show || !fullWidth ? undefined : 0;
@@ -113,13 +110,16 @@ function handleOpenMenu() {
 </script>

 <template>
-  <header :class="b()" :style="style">
+  <header
+    :style="style"
+    class="border-border top-0 flex w-full flex-[0_0_auto] items-center border-b"
+  >
    <div v-if="slots.logo" :style="logoStyle">
      <slot name="logo"></slot>
    </div>
    <VbenIconButton
      v-if="showToggleBtn"
-      :class="e('toggle-btn')"
+      class="my-0 ml-2 mr-1 rounded"
      @click="handleToggleMenu"
    >
      <IcRoundMenu class="size-5" />
@@ -127,7 +127,7 @@ function handleOpenMenu() {

    <VbenIconButton
      v-if="isMobile"
-      :class="e('toggle-btn')"
+      class="my-0 ml-2 mr-1 rounded"
      @click="handleOpenMenu"
    >
      <IcRoundMenu class="size-5" />
@@ -136,21 +136,3 @@ function handleOpenMenu() {
    <slot></slot>
  </header>
 </template>
-
-<style scoped lang="scss">
-@import '@vben-core/design/global';
-
-@include b('header') {
-  top: 0;
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  width: 100%;
-  border-bottom: 1px solid hsl(var(--color-border));
-
-  @include e('toggle-btn') {
-    margin: 0 4px 0 8px;
-    border-radius: 4px;
-  }
-}
-</style>
--- a/packages/@vben-core/uikit/layout-ui/src/components/layout-tabs.vue
+++ b/packages/@vben-core/uikit/layout-ui/src/components/layout-tabs.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useNamespace } from '@vben-core/toolkit';
-
 import type { CSSProperties } from 'vue';

 import { computed } from 'vue';
@@ -25,8 +23,6 @@ const props = withDefaults(defineProps<Props>(), {
  height: 30,
 });

-const { b, e } = useNamespace('tabs');
-
 const hiddenStyle = computed((): CSSProperties => {
  const { height } = props;
  return {
@@ -45,26 +41,10 @@ const style = computed((): CSSProperties => {
 </script>

 <template>
-  <section :class="b()" :style="style">
+  <section :style="style" class="border-border flex w-full border-b">
    <slot></slot>
-    <div :class="e('toolbar')">
+    <div class="flex items-center">
      <slot name="toolbar"></slot>
    </div>
  </section>
 </template>
-
-<style scoped lang="scss">
-@import '@vben-core/design/global';
-
-@include b('tabs') {
-  display: flex;
-  width: 100%;
-  border-bottom: 1px solid hsl(var(--color-border));
-  // transition: all 0.2s;
-
-  @include e('toolbar') {
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
--- a/packages/@vben-core/uikit/layout-ui/src/vben-layout.vue
+++ b/packages/@vben-core/uikit/layout-ui/src/vben-layout.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useNamespace } from '@vben-core/toolkit';
-
 import type { CSSProperties } from 'vue';

 import { useMouse, useScroll, useThrottleFn } from '@vueuse/core';
@@ -60,7 +58,6 @@ const sideExtraCollapse = defineModel<boolean>('sideExtraCollapse');
 const sideExpandOnHover = defineModel<boolean>('sideExpandOnHover');
 const sideVisible = defineModel<boolean>('sideVisible', { default: true });

-const { b, e, is } = useNamespace('layout');
 const {
  arrivedState,
  directions,
@@ -453,7 +450,7 @@ function handleOpenMenu() {
 </script>

 <template>
-  <div :class="[b(), is(realLayout, true)]">
+  <div class="relative flex min-h-full w-full">
    <slot name="preference"></slot>
    <slot name="back-top"></slot>
    <LayoutSide
@@ -496,8 +493,13 @@ function handleOpenMenu() {
      </template>
    </LayoutSide>

-    <div :class="e('main')">
-      <div :style="headerWrapperStyle" :class="e('header-wrapper')">
+    <div
+      class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
+    >
+      <div
+        :style="headerWrapperStyle"
+        class="overflow-hidden transition-all duration-200 ease-in-out"
+      >
        <LayoutHeader
          v-if="headerVisible"
          :full-width="!isSideMode"
@@ -529,7 +531,7 @@ function handleOpenMenu() {

      <!-- </div> -->
      <LayoutContent
-        :class="e('content')"
+        class="transition-[margin-top] duration-300 ease-in"
        :style="contentStyle"
        :content-compact="contentCompact"
        :content-compact-width="contentCompactWidth"
@@ -555,50 +557,9 @@ function handleOpenMenu() {
    </div>
    <div
      v-if="maskVisible"
-      :class="e('mask')"
+      class="fixed left-0 top-0 h-full w-full bg-[rgb(0_0_0_/_40%)] transition-[background-color] duration-200"
      :style="maskStyle"
      @click="handleClickMask"
    ></div>
  </div>
 </template>
-
-<style scoped lang="scss">
-@import '@vben-core/design/global';
-
-@include b('layout') {
-  position: relative;
-  display: flex;
-  width: 100%;
-  min-height: 100%;
-
-  @include e('main') {
-    display: flex;
-    flex: auto;
-    flex: 1;
-    flex-direction: column;
-    overflow-x: hidden;
-    background-color: hsl(var(--color-body));
-    border-left: 1px solid hsl(var(--color-border));
-    transition: all 0.3s ease;
-  }
-
-  @include e('content') {
-    transition: margin-top 0.3s ease;
-  }
-
-  @include e('header-wrapper') {
-    overflow: hidden;
-    transition: all 0.25s ease-in-out;
-  }
-
-  @include e('mask') {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0 0 0 / 40%);
-    transition: background-color 0.2s;
-  }
-}
-</style>
--- a/packages/@vben-core/uikit/menu-ui/package.json
+++ b/packages/@vben-core/uikit/menu-ui/package.json
@@ -46,7 +46,7 @@
    "@vben-core/shadcn-ui": "workspace:*",
    "@vben-core/toolkit": "workspace:*",
    "@vben-core/typings": "workspace:*",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
    "vue": "3.4.27"
  }
 }
--- a/packages/@vben-core/uikit/shadcn-ui/package.json
+++ b/packages/@vben-core/uikit/shadcn-ui/package.json
@@ -45,10 +45,10 @@
    "@vben-core/iconify": "workspace:*",
    "@vben-core/toolkit": "workspace:*",
    "@vben-core/typings": "workspace:*",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "2.1.1",
-    "radix-vue": "^1.8.1",
+    "radix-vue": "^1.8.2",
    "tailwind-merge": "^2.3.0",
    "vue": "3.4.27",
    "vue-sonner": "^1.1.2"
--- a/packages/business/common-ui/package.json
+++ b/packages/business/common-ui/package.json
@@ -50,8 +50,8 @@
    "@vben-core/toolkit": "workspace:*",
    "@vben/locales": "workspace:*",
    "@vben/preference": "workspace:*",
-    "@vueuse/core": "^10.9.0",
-    "@vueuse/integrations": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
+    "@vueuse/integrations": "^10.10.0",
    "qrcode": "^1.5.3",
    "vue": "3.4.27",
    "vue-router": "^4.3.2"
--- a/packages/business/common-ui/src/fallback/fallback.vue
+++ b/packages/business/common-ui/src/fallback/fallback.vue
@@ -59,7 +59,7 @@ function back() {

 <template>
  <div
-    class="-enter-x flex h-screen w-full flex-col items-center justify-center"
+    class="animate-in zoom-in-50 flex h-screen w-full flex-col items-center justify-center duration-300"
  >
    <img v-if="image" :src="image" class="md:1/3 w-1/2 lg:w-1/4" />
    <FeedbackIcon v-else class="md:1/3 h-1/3 w-1/2 lg:w-1/4" />
--- a/packages/business/layouts/src/authentication/authentication.vue
+++ b/packages/business/layouts/src/authentication/authentication.vue
@@ -14,16 +14,18 @@ const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
 </script>

 <template>
-  <div class="bg-body flex min-h-full flex-1 select-none overflow-x-hidden">
+  <div
+    class="bg-background flex min-h-full flex-1 select-none overflow-x-hidden"
+  >
    <AuthenticationFromView
      v-if="authPanelLeft"
-      class="-enter-x min-h-full w-2/5"
+      class="min-h-full w-2/5"
      transition-name="slide-left"
    />

    <div class="absolute left-0 top-0 z-10 flex flex-1">
      <div
-        class="-enter-x text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
+        class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
        :class="
          authPanelLeft || authPanelCenter
            ? 'lg:text-foreground'
@@ -43,17 +45,17 @@ const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
    </div>
    <div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
      <div
-        class="absolute inset-0 h-full w-full bg-gradient-to-r from-[var(--color-authentication-from)] to-[var(--color-authentication-to)]"
+        class="absolute inset-0 h-full w-full bg-[var(--color-authentication)]"
      >
        <div class="flex-center mr-20 flex h-full flex-col">
          <SloganIcon
            :alt="preference.appName"
            class="animate-float h-64 w-2/5"
          />
-          <div class="-enter-x text-1xl mt-6 font-sans text-white lg:text-2xl">
+          <div class="text-1xl mt-6 font-sans text-white lg:text-2xl">
            {{ $t('authentication.layout-title') }}
          </div>
-          <div class="-enter-x dark:text-muted-foreground mt-2 text-white/60">
+          <div class="dark:text-muted-foreground mt-2 text-white/60">
            {{ $t('authentication.layout-desc') }}
          </div>
        </div>
@@ -61,7 +63,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
    </div>
    <div
      v-if="authPanelCenter"
-      class="flex-center w-full dark:bg-[var(--color-authentication-to)]"
+      class="flex-center w-full dark:bg-[var(--color-authentication)]"
    >
      <AuthenticationFromView
        class="enter-y md:bg-background w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-2/5"
@@ -73,7 +75,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
    </div>
    <AuthenticationFromView
      v-if="authPanelRight"
-      class="enter-x min-h-full w-2/5 flex-1"
+      class="min-h-full w-2/5 flex-1"
    />
  </div>
 </template>
--- a/packages/business/layouts/src/authentication/toolbar.vue
+++ b/packages/business/layouts/src/authentication/toolbar.vue
@@ -12,7 +12,7 @@ defineOptions({
 </script>
 <template>
  <div
-    class="flex-center bg-background absolute right-2 top-4 rounded-3xl px-3 py-1 dark:bg-[var(--color-authentication-to)]"
+    class="flex-center bg-background absolute right-2 top-4 rounded-3xl px-3 py-1 dark:bg-[var(--color-authentication)]"
  >
    <div class="hidden md:flex">
      <AuthenticationColorToggle />
--- a/packages/preference/package.json
+++ b/packages/preference/package.json
@@ -34,7 +34,7 @@
  "dependencies": {
    "@vben-core/toolkit": "workspace:*",
    "@vben-core/typings": "workspace:*",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
    "vue": "3.4.27"
  }
 }
--- a/packages/preference/src/preference.ts
+++ b/packages/preference/src/preference.ts
@@ -110,8 +110,8 @@ function updateTheme(preference: Preference) {
 function updateColorMode(preference: Preference) {
  const { colorGrayMode, colorWeakMode } = preference;
  const body = document.body;
-  const COLOR_WEAK = 'invert';
-  const COLOR_GRAY = 'grayscale';
+  const COLOR_WEAK = 'invert-mode';
+  const COLOR_GRAY = 'grayscale-mode';
  colorWeakMode
    ? body.classList.add(COLOR_WEAK)
    : body.classList.remove(COLOR_WEAK);
--- a/packages/@vben-core/shared/design/src/scss/common/entry.scss
+++ b/packages/@vben-core/shared/design/src/scss/common/entry.scss
--- a/packages/@vben-core/shared/design/src/scss/nprogress.scss
+++ b/packages/@vben-core/shared/design/src/scss/nprogress.scss
@@ -4,13 +4,14 @@
 }

 #nprogress .bar {
+  @apply bg-primary;
+
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1031;
  width: 100%;
  height: 2px;
-  background: hsl(var(--color-primary));
 }

 /* Fancy blur effect */
--- a/packages/styles/src/index.scss
+++ b/packages/styles/src/index.scss
@@ -0,0 +1,4 @@
+@import './tokens/light';
+@import './tokens/dark';
+@import './common/nprogress.css';
+// @import './common/entry';
--- a/packages/styles/src/index.ts
+++ b/packages/styles/src/index.ts
@@ -1,3 +1,4 @@
+import './index.scss';
 import '@vben-core/design/tailwind';

 import '@vben-core/design';
--- a/packages/styles/src/tokens/dark.scss
+++ b/packages/styles/src/tokens/dark.scss
@@ -0,0 +1,6 @@
+:root.dark {
+  /* authentication */
+  --color-authentication: hsl(240deg 11% 2%);
+
+  color-scheme: dark;
+}
--- a/packages/styles/src/tokens/light.scss
+++ b/packages/styles/src/tokens/light.scss
@@ -0,0 +1,9 @@
+/* https://gavin-yyc.github.io/colorconvert/ */
+:root {
+  --font-geist-sans: 'geist-sans', -apple-system, blinkmacsystemfont, 'Segoe UI',
+    roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';
+
+  /* authentication */
+  --color-authentication: hsl(231deg 61% 44%);
+}