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

package/src/layouts/widgets/breadcrumb.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import type { BreadcrumbStyleType } from '@melt-js/libs-vben/types';
+
+import type { IBreadcrumb } from '@melt-js/comps-vben/shadcn-ui';
+
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import { VbenBreadcrumbView } from '@melt-js/comps-vben/shadcn-ui';
+
+import { resolveBreadcrumbMatches } from './breadcrumb-routes';
+
+interface Props {
+  hideWhenOnlyOne?: boolean;
+  showHome?: boolean;
+  showIcon?: boolean;
+  type?: BreadcrumbStyleType;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showHome: false,
+  showIcon: false,
+  type: 'normal',
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const breadcrumbs = computed((): IBreadcrumb[] => {
+  const matched = resolveBreadcrumbMatches(route, (path) =>
+    router.resolve(path),
+  );
+
+  const resultBreadcrumb: IBreadcrumb[] = [];
+
+  for (const match of matched) {
+    const { meta, path } = match;
+    const { hideChildrenInMenu, hideInBreadcrumb, icon, name, title } =
+      meta || {};
+    if (hideInBreadcrumb || hideChildrenInMenu || !path) {
+      continue;
+    }
+
+    resultBreadcrumb.push({
+      icon,
+      path: path || route.path,
+      title: title ? $t((title || name) as string) : '',
+    });
+  }
+  if (props.showHome) {
+    resultBreadcrumb.unshift({
+      icon: 'mdi:home-outline',
+      isHome: true,
+      path: '/',
+    });
+  }
+  if (props.hideWhenOnlyOne && resultBreadcrumb.length === 1) {
+    return [];
+  }
+
+  return resultBreadcrumb;
+});
+
+function handleSelect(path: string) {
+  router.push(path);
+}
+</script>
+<template>
+  <VbenBreadcrumbView
+    :breadcrumbs="breadcrumbs"
+    :show-icon="showIcon"
+    :style-type="type"
+    class="ml-2"
+    @select="handleSelect"
+  />
+</template>

package/src/layouts/widgets/check-updates/check-updates.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import { useVbenModal } from '@melt-js/comps-vben/popup-ui';
+
+interface Props {
+  // 轮询时间，分钟
+  checkUpdatesInterval?: number;
+  // 检查更新的地址
+  checkUpdateUrl?: string;
+}
+
+defineOptions({ name: 'CheckUpdates' });
+
+const props = withDefaults(defineProps<Props>(), {
+  checkUpdatesInterval: 1,
+  checkUpdateUrl: import.meta.env.BASE_URL || '/',
+});
+
+let isCheckingUpdates = false;
+const currentVersionTag = ref('');
+const lastVersionTag = ref('');
+const timer = ref<ReturnType<typeof setInterval>>();
+
+const [UpdateNoticeModal, modalApi] = useVbenModal({
+  closable: false,
+  closeOnPressEscape: false,
+  closeOnClickModal: false,
+  onConfirm() {
+    lastVersionTag.value = currentVersionTag.value;
+    window.location.reload();
+    // handleSubmitLogout();
+  },
+});
+
+async function getVersionTag() {
+  try {
+    if (
+      location.hostname === 'localhost' ||
+      location.hostname === '127.0.0.1'
+    ) {
+      return null;
+    }
+    const response = await fetch(props.checkUpdateUrl, {
+      cache: 'no-cache',
+      method: 'HEAD',
+      redirect: 'manual',
+    });
+
+    return (
+      response.headers.get('etag') || response.headers.get('last-modified')
+    );
+  } catch {
+    console.error('Failed to fetch version tag');
+    return null;
+  }
+}
+
+async function checkForUpdates() {
+  const versionTag = await getVersionTag();
+  if (!versionTag) {
+    return;
+  }
+
+  // 首次运行时不提示更新
+  if (!lastVersionTag.value) {
+    lastVersionTag.value = versionTag;
+    return;
+  }
+
+  if (lastVersionTag.value !== versionTag && versionTag) {
+    clearInterval(timer.value);
+    handleNotice(versionTag);
+  }
+}
+function handleNotice(versionTag: string) {
+  currentVersionTag.value = versionTag;
+  modalApi.open();
+}
+
+function start() {
+  if (props.checkUpdatesInterval <= 0) {
+    return;
+  }
+
+  // 每 checkUpdatesInterval(默认值为1) 分钟检查一次
+  timer.value = setInterval(
+    checkForUpdates,
+    props.checkUpdatesInterval * 60 * 1000,
+  );
+}
+
+function handleVisibilitychange() {
+  if (document.hidden) {
+    stop();
+  } else {
+    if (!isCheckingUpdates) {
+      isCheckingUpdates = true;
+      checkForUpdates().finally(() => {
+        isCheckingUpdates = false;
+        start();
+      });
+    }
+  }
+}
+
+function stop() {
+  clearInterval(timer.value);
+}
+
+onMounted(() => {
+  start();
+  document.addEventListener('visibilitychange', handleVisibilitychange);
+});
+
+onUnmounted(() => {
+  stop();
+  document.removeEventListener('visibilitychange', handleVisibilitychange);
+});
+</script>
+<template>
+  <UpdateNoticeModal
+    :cancel-text="$t('common.cancel')"
+    :confirm-text="$t('common.refresh')"
+    :fullscreen-button="false"
+    :title="$t('ui.widgets.checkUpdatesTitle')"
+    centered
+    content-class="px-8 min-h-10"
+    footer-class="border-none mb-3 mr-3"
+    header-class="border-none"
+  >
+    {{ $t('ui.widgets.checkUpdatesDescription') }}
+  </UpdateNoticeModal>
+</template>

package/src/layouts/widgets/check-updates/index.ts

@@ -0,0 +1 @@
+export { default as CheckUpdates } from './check-updates.vue';

package/src/layouts/widgets/color-toggle.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { BuiltinThemeType } from '@melt-js/libs-vben/types';
+
+import { Palette } from '@melt-js/libs-vben/icons';
+import {
+  COLOR_PRESETS,
+  preferences,
+  updatePreferences,
+} from '@melt-js/libs-vben/preferences';
+
+import { VbenIconButton } from '@melt-js/comps-vben/shadcn-ui';
+
+defineOptions({
+  name: 'AuthenticationColorToggle',
+});
+
+function handleUpdate(colorPrimary: string, type: BuiltinThemeType) {
+  updatePreferences({
+    theme: {
+      colorPrimary,
+      builtinType: type,
+    },
+  });
+}
+</script>
+
+<template>
+  <div class="group relative flex items-center overflow-hidden">
+    <div
+      class="flex w-0 overflow-hidden transition-all duration-500 ease-out group-hover:w-60"
+    >
+      <template v-for="preset in COLOR_PRESETS" :key="preset.color">
+        <VbenIconButton
+          class="flex-center shrink-0"
+          @click="handleUpdate(preset.color, preset.type)"
+        >
+          <div
+            :style="{ backgroundColor: preset.color }"
+            class="relative flex-center size-5 rounded-full hover:scale-110"
+          >
+            <svg
+              v-if="preferences.theme.builtinType === preset.type"
+              class="size-3.5 text-white"
+              height="1em"
+              viewBox="0 0 15 15"
+              width="1em"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M11.467 3.727c.289.189.37.576.181.865l-4.25 6.5a.625.625 0 0 1-.944.12l-2.75-2.5a.625.625 0 0 1 .841-.925l2.208 2.007l3.849-5.886a.625.625 0 0 1 .865-.181"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
+        </VbenIconButton>
+      </template>
+    </div>
+
+    <VbenIconButton>
+      <Palette class="size-4 text-primary" />
+    </VbenIconButton>
+  </div>
+</template>

package/src/layouts/widgets/global-search/global-search.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import type { MenuRecordRaw } from '@melt-js/libs-vben/types';
+
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import {
+  ArrowDown,
+  ArrowUp,
+  CornerDownLeft,
+  MdiKeyboardEsc,
+  Search,
+} from '@melt-js/libs-vben/icons';
+import { $t } from '@melt-js/libs-vben/locales';
+import { isWindowsOs } from '@melt-js/libs-vben/utils';
+
+import { useVbenModal } from '@melt-js/comps-vben/popup-ui';
+
+import { useMagicKeys, whenever } from '@vueuse/core';
+
+import SearchPanel from './search-panel.vue';
+
+defineOptions({
+  name: 'GlobalSearch',
+});
+
+const props = withDefaults(
+  defineProps<{
+    enableShortcutKey?: boolean;
+    menus?: MenuRecordRaw[];
+    /** 是否显示触发按钮（嵌在 dropdown 等容器里时可关掉） */
+    showButton?: boolean;
+  }>(),
+  {
+    enableShortcutKey: true,
+    menus: () => [],
+    showButton: true,
+  },
+);
+
+const keyword = ref('');
+const searchInputRef = ref<HTMLInputElement>();
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      keyword.value = '';
+    }
+  },
+});
+const open = modalApi.useStore((state) => state.isOpen);
+
+function handleClose() {
+  modalApi.close();
+  keyword.value = '';
+}
+
+const keys = useMagicKeys();
+const cmd = isWindowsOs() ? keys['ctrl+k'] : keys['cmd+k'];
+if (cmd) {
+  whenever(cmd, () => {
+    if (props.enableShortcutKey) {
+      modalApi.open();
+    }
+  });
+}
+
+whenever(open, () => {
+  nextTick(() => {
+    searchInputRef.value?.focus();
+  });
+});
+
+const preventDefaultBrowserSearchHotKey = (event: KeyboardEvent) => {
+  if (event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault();
+  }
+};
+
+const toggleKeydownListener = () => {
+  if (props.enableShortcutKey) {
+    window.addEventListener('keydown', preventDefaultBrowserSearchHotKey);
+  } else {
+    window.removeEventListener('keydown', preventDefaultBrowserSearchHotKey);
+  }
+};
+
+const toggleOpen = () => {
+  open.value ? modalApi.close() : modalApi.open();
+};
+
+watch(() => props.enableShortcutKey, toggleKeydownListener);
+
+onMounted(() => {
+  toggleKeydownListener();
+
+  onUnmounted(() => {
+    window.removeEventListener('keydown', preventDefaultBrowserSearchHotKey);
+  });
+});
+
+// 暴露给父组件，允许从外部触发搜索弹框（如 user-dropdown 里点击菜单项触发）
+defineExpose({
+  open: () => modalApi.open(),
+  close: () => modalApi.close(),
+  toggle: toggleOpen,
+});
+</script>
+
+<template>
+  <div>
+    <Modal
+      :fullscreen-button="false"
+      class="w-150"
+      header-class="py-2 border-b"
+    >
+      <template #title>
+        <div class="flex items-center">
+          <Search class="mr-2 size-4 text-muted-foreground" />
+          <input
+            ref="searchInputRef"
+            v-model="keyword"
+            :placeholder="$t('ui.widgets.search.searchNavigate')"
+            class="ring-none w-[80%] rounded-md border border-none bg-transparent p-2 pl-0 text-sm font-normal ring-0 ring-offset-transparent outline-hidden placeholder:text-muted-foreground focus-visible:ring-transparent"
+          />
+        </div>
+      </template>
+
+      <SearchPanel :keyword="keyword" :menus="menus" @close="handleClose" />
+      <template #footer>
+        <div class="flex w-full justify-start text-xs">
+          <div class="mr-2 flex items-center">
+            <CornerDownLeft class="mr-1 size-3" />
+            {{ $t('ui.widgets.search.select') }}
+          </div>
+          <div class="mr-2 flex items-center">
+            <ArrowUp class="mr-1 size-3" />
+            <ArrowDown class="mr-1 size-3" />
+            {{ $t('ui.widgets.search.navigate') }}
+          </div>
+          <div class="flex items-center">
+            <MdiKeyboardEsc class="mr-1 size-3" />
+            {{ $t('ui.widgets.search.close') }}
+          </div>
+        </div>
+      </template>
+    </Modal>
+    <div
+      v-if="showButton"
+      class="group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-hidden md:bg-accent"
+      @click="toggleOpen()"
+    >
+      <Search
+        class="size-4 text-muted-foreground group-hover:text-foreground group-hover:opacity-100"
+      />
+      <span
+        class="hidden text-xs text-muted-foreground duration-300 group-hover:text-foreground md:block"
+      >
+        {{ $t('ui.widgets.search.title') }}
+      </span>
+      <span
+        v-if="enableShortcutKey"
+        class="relative hidden rounded-sm rounded-r-xl border-foreground/60 bg-background px-1.5 py-1 text-xs leading-none text-muted-foreground group-hover:text-foreground group-hover:opacity-100 md:block"
+      >
+        {{ isWindowsOs() ? 'Ctrl' : '⌘' }}
+        <kbd>K</kbd>
+      </span>
+      <span v-else></span>
+    </div>
+  </div>
+</template>

package/src/layouts/widgets/global-search/index.ts

@@ -0,0 +1 @@
+export { default as GlobalSearch } from './global-search.vue';