@melt-js/libs-vben 0.0.0-stage → 2026.11.8-2

package/src/core-preferences/use-preferences.ts

@@ -0,0 +1,282 @@
+import { computed } from 'vue';
+
+import { diff, diffStrict } from '@melt-js/libs-vben/shared/utils';
+
+import { preferencesManager } from './preferences';
+import { isDarkTheme } from './update-css-variables';
+
+function usePreferences() {
+  const preferences = preferencesManager.getPreferences();
+  const customPreferences = preferencesManager.getCustomPreferences();
+  const initialPreferences = preferencesManager.getInitialPreferences();
+  const initialCustomPreferences =
+    preferencesManager.getInitialCustomPreferences();
+  const preferencesExtension = computed(() =>
+    preferencesManager.getPreferencesExtension(),
+  );
+  /**
+   * @zh_CN 计算偏好设置的变化
+   * @zh_CN 使用 diffStrict：图标排序等数组字段需顺序敏感比较
+   */
+  const diffPreference = computed(() => {
+    return diffStrict(initialPreferences, preferences);
+  });
+
+  const diffCustomPreference = computed(() => {
+    return diff(initialCustomPreferences, customPreferences);
+  });
+
+  const appPreferences = computed(() => preferences.app);
+
+  const shortcutKeysPreferences = computed(() => preferences.shortcutKeys);
+
+  /**
+   * @zh_CN 判断是否为暗黑模式
+   * @param  preferences - 当前偏好设置对象，它的主题值将被用来判断是否为暗黑模式。
+   * @returns 如果主题为暗黑模式，返回 true，否则返回 false。
+   */
+  const isDark = computed(() => {
+    return isDarkTheme(preferences.theme.mode);
+  });
+
+  const locale = computed(() => {
+    return appPreferences.value.locale;
+  });
+
+  const isMobile = computed(() => {
+    return appPreferences.value.isMobile;
+  });
+
+  const theme = computed(() => {
+    return isDark.value ? 'dark' : 'light';
+  });
+
+  /**
+   * @zh_CN 布局方式
+   */
+  const layout = computed(() =>
+    isMobile.value ? 'sidebar-nav' : appPreferences.value.layout,
+  );
+
+  /**
+   * @zh_CN 是否显示顶栏
+   */
+  const isShowHeaderNav = computed(() => {
+    return preferences.header.enable;
+  });
+
+  /**
+   * @zh_CN 是否全屏显示content，不需要侧边、底部、顶部、tab区域
+   */
+  const isFullContent = computed(
+    () => appPreferences.value.layout === 'full-content',
+  );
+
+  /**
+   * @zh_CN 是否侧边导航模式
+   */
+  const isSideNav = computed(
+    () => appPreferences.value.layout === 'sidebar-nav',
+  );
+
+  /**
+   * @zh_CN 是否侧边混合模式
+   */
+  const isSideMixedNav = computed(
+    () => appPreferences.value.layout === 'sidebar-mixed-nav',
+  );
+
+  /**
+   * @zh_CN 是否为头部导航模式
+   */
+  const isHeaderNav = computed(
+    () => appPreferences.value.layout === 'header-nav',
+  );
+
+  /**
+   * @zh_CN 是否为头部混合导航模式
+   */
+  const isHeaderMixedNav = computed(
+    () => appPreferences.value.layout === 'header-mixed-nav',
+  );
+
+  /**
+   * @zh_CN 是否为顶部通栏+侧边导航模式
+   */
+  const isHeaderSidebarNav = computed(
+    () => appPreferences.value.layout === 'header-sidebar-nav',
+  );
+
+  /**
+   * @zh_CN 是否为混合导航模式
+   */
+  const isMixedNav = computed(
+    () => appPreferences.value.layout === 'mixed-nav',
+  );
+
+  /**
+   * @zh_CN 是否包含侧边导航模式
+   */
+  const isSideMode = computed(() => {
+    return (
+      isMixedNav.value ||
+      isSideMixedNav.value ||
+      isSideNav.value ||
+      isHeaderMixedNav.value ||
+      isHeaderSidebarNav.value
+    );
+  });
+
+  const sidebarCollapsed = computed(() => {
+    return preferences.sidebar.collapsed;
+  });
+
+  /**
+   * @zh_CN 是否开启keep-alive
+   * 在tabs可见以及开启keep-alive的情况下才开启
+   */
+  const keepAlive = computed(
+    () => preferences.tabbar.enable && preferences.tabbar.keepAlive,
+  );
+
+  /**
+   * @zh_CN 登录注册页面布局是否为左侧
+   */
+  const authPanelLeft = computed(() => {
+    return appPreferences.value.authPageLayout === 'panel-left';
+  });
+
+  /**
+   * @zh_CN 登录注册页面布局是否为右侧
+   */
+  const authPanelRight = computed(() => {
+    return appPreferences.value.authPageLayout === 'panel-right';
+  });
+
+  /**
+   * @zh_CN 登录注册页面布局是否为中间
+   */
+  const authPanelCenter = computed(() => {
+    return appPreferences.value.authPageLayout === 'panel-center';
+  });
+
+  /**
+   * @zh_CN 内容是否已经最大化
+   * 排除 full-content模式
+   */
+  const contentIsMaximize = computed(() => {
+    const headerIsHidden = preferences.header.hidden;
+    const sidebarIsHidden = preferences.sidebar.hidden;
+    return headerIsHidden && sidebarIsHidden && !isFullContent.value;
+  });
+
+  /**
+   * @zh_CN 是否启用全局搜索快捷键
+   */
+  const globalSearchShortcutKey = computed(() => {
+    const { enable, globalSearch } = shortcutKeysPreferences.value;
+    return enable && globalSearch;
+  });
+
+  /**
+   * @zh_CN 是否启用全局注销快捷键
+   */
+  const globalLogoutShortcutKey = computed(() => {
+    const { enable, globalLogout } = shortcutKeysPreferences.value;
+    return enable && globalLogout;
+  });
+
+  /**
+   * @zh_CN 是否启用全局注销快捷键
+   */
+  const globalEscapeShortcutKey = computed(() => {
+    const { enable, globalEscape } = shortcutKeysPreferences.value;
+    return enable && globalEscape;
+  });
+
+  const globalLockScreenShortcutKey = computed(() => {
+    const { enable, globalLockScreen } = shortcutKeysPreferences.value;
+    return enable && globalLockScreen;
+  });
+
+  /**
+   * @zh_CN 偏好设置按钮位置
+   */
+  const preferencesButtonPosition = computed(() => {
+    const { enablePreferences, preferencesButtonPosition } = preferences.app;
+    // 如果没有启用偏好设置按钮
+    if (!enablePreferences) {
+      return {
+        fixed: false,
+        header: false,
+        userDropdown: false,
+      };
+    }
+
+    const { header, sidebar } = preferences;
+    const headerHidden = header.hidden;
+    const sidebarHidden = sidebar.hidden;
+
+    const contentIsMaximize = headerHidden && sidebarHidden;
+
+    const isHeaderPosition = preferencesButtonPosition === 'header';
+    const isUserDropdownPosition =
+      preferencesButtonPosition === 'user-dropdown';
+
+    // 如果设置了固定位置
+    if (preferencesButtonPosition !== 'auto') {
+      return {
+        fixed: preferencesButtonPosition === 'fixed',
+        header: isHeaderPosition,
+        userDropdown: isUserDropdownPosition,
+      };
+    }
+
+    // 如果是全屏模式或者没有固定在顶部，
+    const fixed =
+      contentIsMaximize ||
+      isFullContent.value ||
+      isMobile.value ||
+      !isShowHeaderNav.value;
+
+    return {
+      fixed,
+      header: !fixed,
+      userDropdown: !fixed && isUserDropdownPosition,
+    };
+  });
+
+  return {
+    authPanelCenter,
+    authPanelLeft,
+    authPanelRight,
+    contentIsMaximize,
+    customPreferences,
+    diffPreference,
+    diffCustomPreference,
+    globalLockScreenShortcutKey,
+    globalLogoutShortcutKey,
+    globalEscapeShortcutKey,
+    globalSearchShortcutKey,
+    isDark,
+    isFullContent,
+    isHeaderMixedNav,
+    isHeaderNav,
+    isHeaderSidebarNav,
+    isMixedNav,
+    isMobile,
+    isSideMixedNav,
+    isSideMode,
+    isSideNav,
+    keepAlive,
+    layout,
+    locale,
+    preferencesExtension,
+    preferencesButtonPosition,
+    sidebarCollapsed,
+    theme,
+    app: appPreferences.value,
+  };
+}
+
+export { usePreferences };

package/src/design/css/global.css

@@ -0,0 +1 @@
+@import '@melt-js/libs-vben/theme';

package/src/design/css/nprogress.css

@@ -0,0 +1,61 @@
+@reference "@melt-js/libs-vben/theme";
+
+/* Make clicks pass-through */
+#nprogress {
+  @apply pointer-events-none;
+}
+
+#nprogress .bar {
+  @apply bg-primary fixed top-0 left-0 z-1031 h-0.5 w-full;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  @apply absolute right-0 block h-full w-25;
+
+  box-shadow:
+    0 0 10px hsl(var(--primary)),
+    0 0 5px hsl(var(--primary));
+  opacity: 1;
+  transform: rotate(3deg) translate(0, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  @apply fixed top-4 right-4 z-1031 block;
+}
+
+#nprogress .spinner-icon {
+  @apply border-t-primary border-l-primary size-4 rounded-full border-2 border-solid border-transparent;
+
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  @apply relative overflow-hidden;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  @apply absolute;
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/design/css/transition.css

@@ -0,0 +1,238 @@
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-up-move {
+  transition: transform 0.3s;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-15px);
+}
+
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-down-move {
+  transition: transform 0.3s;
+}
+
+.slide-down-enter-from,
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(15px);
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-left-move {
+  transition: transform 0.3s;
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translate(-15px);
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-right-move {
+  transition: transform 0.3s;
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translate(15px);
+}
+
+.fade-transition-enter-active,
+.fade-transition-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-transition-enter-from,
+.fade-transition-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition:
+    opacity 0.3s,
+    transform 0.3s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translate(-30px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translate(30px);
+}
+
+.fade-down-enter-active,
+.fade-down-leave-active {
+  transition:
+    opacity 0.25s,
+    transform 0.3s;
+}
+
+.fade-down-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+.fade-down-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all 0.28s;
+}
+
+.fade-scale-enter-from {
+  opacity: 0;
+  transform: scale(1.2);
+}
+
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.fade-up-enter-active,
+.fade-up-leave-active {
+  transition:
+    opacity 0.2s,
+    transform 0.25s;
+}
+
+.fade-up-enter-from {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+.fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+@keyframes fade-slide {
+  0% {
+    opacity: 0;
+    transform: translate(-30px);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(30px);
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-up {
+  0% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+}
+
+@keyframes fade-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+}
+
+.fade-slow {
+  animation: fade 3s infinite;
+}
+
+.fade-slide-slow {
+  animation: fade-slide 3s infinite;
+}
+
+.fade-up-slow {
+  animation: fade-up 3s infinite;
+}
+
+.fade-down-slow {
+  animation: fade-down 3s infinite;
+}
+
+.collapse-transition {
+  transition:
+    0.2s height ease-in-out,
+    0.2s padding-top ease-in-out,
+    0.2s padding-bottom ease-in-out;
+}
+
+.collapse-transition-leave-active,
+.collapse-transition-enter-active {
+  transition:
+    0.2s max-height ease-in-out,
+    0.2s padding-top ease-in-out,
+    0.2s margin-top ease-in-out;
+}

package/src/design/css/ui.css

@@ -0,0 +1,101 @@
+.side-content {
+  animation-duration: 0.3s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.side-content[data-side='top'] {
+  animation-name: slide-up;
+}
+
+.side-content[data-side='bottom'] {
+  animation-name: slide-down;
+}
+
+.side-content[data-side='left'] {
+  animation-name: slide-left;
+}
+
+.side-content[data-side='right'] {
+  animation-name: slide-right;
+}
+
+.breadcrumb-transition-enter-active {
+  transition:
+    transform 0.4s cubic-bezier(0.76, 0, 0.24, 1),
+    opacity 0.4s cubic-bezier(0.76, 0, 0.24, 1);
+}
+
+.breadcrumb-transition-leave-active {
+  display: none;
+}
+
+.breadcrumb-transition-enter-from {
+  opacity: 0;
+  transform: translateX(30px) skewX(-30deg);
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-left {
+  from {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-right {
+  from {
+    opacity: 0;
+    transform: translateX(50px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.z-popup {
+  z-index: var(--popup-z-index);
+}
+
+@keyframes shrink {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}