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

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

@@ -0,0 +1,299 @@
+<script setup lang="ts">
+import type { MenuRecordRaw } from '@melt-js/libs-vben/types';
+
+import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { SearchX, X } from '@melt-js/libs-vben/icons';
+import { $t } from '@melt-js/libs-vben/locales';
+import { mapTree, traverseTreeValues, uniqueByField } from '@melt-js/libs-vben/utils';
+
+import { VbenIcon, VbenScrollbar } from '@melt-js/comps-vben/shadcn-ui';
+import { isHttpUrl } from '@melt-js/libs-vben/shared/utils';
+
+import {
+  onKeyStroke,
+  useEventListener,
+  useLocalStorage,
+  useThrottleFn,
+} from '@vueuse/core';
+
+defineOptions({
+  name: 'SearchPanel',
+});
+
+const props = withDefaults(
+  defineProps<{ keyword?: string; menus?: MenuRecordRaw[] }>(),
+  {
+    keyword: '',
+    menus: () => [],
+  },
+);
+const emit = defineEmits<{ close: [] }>();
+
+const router = useRouter();
+const searchHistory = useLocalStorage<MenuRecordRaw[]>(
+  `__search-history-${location.hostname}__`,
+  [],
+);
+const activeIndex = ref(-1);
+const searchItems = shallowRef<MenuRecordRaw[]>([]);
+const searchResults = ref<MenuRecordRaw[]>([]);
+const isNavigating = ref(false);
+
+const handleSearch = useThrottleFn(search, 200);
+
+// 搜索函数，用于根据搜索关键词查找匹配的菜单项
+function search(searchKey: string) {
+  // 去除搜索关键词的前后空格
+  searchKey = searchKey.trim();
+
+  // 如果搜索关键词为空，清空搜索结果并返回
+  if (!searchKey) {
+    searchResults.value = [];
+    return;
+  }
+  // 将搜索关键词转换为小写，确保大小写不敏感的搜索
+  searchKey = searchKey.toLowerCase();
+
+  // 使用搜索关键词创建正则表达式
+  const reg = createSearchReg(searchKey);
+
+  // 初始化结果数组
+  const results: MenuRecordRaw[] = [];
+
+  // 遍历搜索项
+  traverseTreeValues(searchItems.value, (item) => {
+    // 如果菜单项的名称匹配正则表达式，将其添加到结果数组中
+    if (reg.test(item.name?.toLowerCase())) {
+      results.push(item);
+    }
+  });
+
+  // 更新搜索结果
+  searchResults.value = results;
+
+  // 如果有搜索结果，设置索引为 0
+  if (results.length > 0) {
+    activeIndex.value = 0;
+  }
+
+  // 赋值索引为 0
+  activeIndex.value = 0;
+}
+
+// When the keyboard up and down keys move to an invisible place
+// the scroll bar needs to scroll automatically
+function scrollIntoView() {
+  const element = document.querySelector(
+    `[data-search-item="${activeIndex.value}"]`,
+  );
+
+  if (element) {
+    element.scrollIntoView({ block: 'nearest' });
+  }
+}
+
+// enter keyboard event
+async function handleEnter() {
+  if (searchResults.value.length === 0) {
+    return;
+  }
+  const result = searchResults.value;
+  const index = activeIndex.value;
+  if (result.length === 0 || index < 0) {
+    return;
+  }
+  const to = result[index];
+  if (to) {
+    searchHistory.value = uniqueByField([...searchHistory.value, to], 'path');
+    handleClose();
+    await nextTick();
+    if (isHttpUrl(to.path)) {
+      window.open(to.path, '_blank');
+    } else {
+      router.push({ path: to.path, replace: true });
+    }
+  }
+}
+
+// Arrow key up
+function handleUp() {
+  if (searchResults.value.length === 0) {
+    return;
+  }
+  isNavigating.value = true;
+  activeIndex.value--;
+  if (activeIndex.value < 0) {
+    activeIndex.value = searchResults.value.length - 1;
+  }
+  scrollIntoView();
+}
+
+// Arrow key down
+function handleDown() {
+  if (searchResults.value.length === 0) {
+    return;
+  }
+  isNavigating.value = true;
+  activeIndex.value++;
+  if (activeIndex.value > searchResults.value.length - 1) {
+    activeIndex.value = 0;
+  }
+  scrollIntoView();
+}
+
+// close search modal
+function handleClose() {
+  searchResults.value = [];
+  emit('close');
+}
+
+// Activate when the mouse moves to a certain line
+function handleMouseenter(e: MouseEvent) {
+  if (isNavigating.value) return;
+  const index = (e.target as HTMLElement)?.dataset.index;
+  activeIndex.value = Number(index);
+}
+
+function removeItem(index: number) {
+  if (props.keyword) {
+    searchResults.value.splice(index, 1);
+  } else {
+    searchHistory.value.splice(index, 1);
+  }
+  activeIndex.value = Math.max(activeIndex.value - 1, 0);
+  scrollIntoView();
+}
+
+// 存储所有需要转义的特殊字符
+const code = new Set([
+  '$',
+  '(',
+  ')',
+  '*',
+  '+',
+  '.',
+  '?',
+  '[',
+  '\\',
+  ']',
+  '^',
+  '{',
+  '|',
+  '}',
+]);
+
+// 转换函数，用于转义特殊字符
+function transform(c: string) {
+  // 如果字符在特殊字符列表中，返回转义后的字符
+  // 如果不在，返回字符本身
+  return code.has(c) ? `\\${c}` : c;
+}
+
+// 创建搜索正则表达式
+function createSearchReg(key: string) {
+  // 将输入的字符串拆分为单个字符
+  // 对每个字符进行转义
+  // 然后用'.*'连接所有字符，创建正则表达式
+  const keys = [...key].map((item) => transform(item)).join('.*');
+  // 返回创建的正则表达式
+  return new RegExp(`.*${keys}.*`);
+}
+
+watch(
+  () => props.keyword,
+  (val) => {
+    if (val) {
+      handleSearch(val);
+    } else {
+      searchResults.value = searchHistory.value;
+    }
+  },
+);
+
+onMounted(() => {
+  searchItems.value = mapTree(props.menus, (item) => {
+    return {
+      ...item,
+      name: $t(item?.name),
+    };
+  });
+  if (searchHistory.value.length > 0) {
+    searchResults.value = searchHistory.value;
+  }
+  // enter search
+  onKeyStroke('Enter', handleEnter);
+  // Monitor keyboard arrow keys
+  onKeyStroke('ArrowUp', handleUp);
+  onKeyStroke('ArrowDown', handleDown);
+  // esc close
+  onKeyStroke('Escape', handleClose);
+});
+
+useEventListener('mousemove', () => {
+  isNavigating.value = false;
+});
+</script>
+
+<template>
+  <VbenScrollbar>
+    <div class="flex! h-full justify-center px-2 sm:max-h-112.5">
+      <!-- 无搜索结果 -->
+      <div
+        v-if="keyword && searchResults.length === 0"
+        class="text-center text-muted-foreground"
+      >
+        <SearchX class="mx-auto mt-4 size-12" />
+        <p class="mt-6 mb-10 text-xs">
+          {{ $t('ui.widgets.search.noResults') }}
+          <span class="text-sm font-medium text-foreground">
+            "{{ keyword }}"
+          </span>
+        </p>
+      </div>
+      <!-- 历史搜索记录 & 没有搜索结果 -->
+      <div
+        v-if="!keyword && searchResults.length === 0"
+        class="text-center text-muted-foreground"
+      >
+        <p class="my-10 text-xs">
+          {{ $t('ui.widgets.search.noRecent') }}
+        </p>
+      </div>
+
+      <ul v-show="searchResults.length > 0" class="w-full">
+        <li
+          v-if="searchHistory.length > 0 && !keyword"
+          class="mb-2 text-xs text-muted-foreground"
+        >
+          {{ $t('ui.widgets.search.recent') }}
+        </li>
+        <li
+          v-for="(item, index) in uniqueByField(searchResults, 'path')"
+          :key="item.path"
+          :class="
+            activeIndex === index
+              ? 'active bg-primary text-primary-foreground'
+              : ''
+          "
+          :data-index="index"
+          :data-search-item="index"
+          class="group mb-3 flex-center w-full cursor-pointer rounded-lg bg-accent p-4"
+          @click="handleEnter"
+          @mouseenter="handleMouseenter"
+        >
+          <VbenIcon :icon="item.icon" class="mr-2 size-5 shrink-0" fallback />
+
+          <span class="flex-1">{{ item.name }}</span>
+          <div
+            class="flex-center rounded-full p-1 hover:scale-110 hover:text-primary-foreground dark:hover:bg-accent"
+            @click.stop="removeItem(index)"
+          >
+            <X class="size-4" />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </VbenScrollbar>
+</template>

package/src/layouts/widgets/index.ts

@@ -0,0 +1,12 @@
+export { default as Breadcrumb } from './breadcrumb.vue';
+export * from './check-updates';
+export { default as AuthenticationColorToggle } from './color-toggle.vue';
+export * from './global-search';
+export { default as LanguageToggle } from './language-toggle.vue';
+export { default as AuthenticationLayoutToggle } from './layout-toggle.vue';
+export * from './lock-screen';
+export * from './notification';
+export * from './preferences';
+export * from './theme-toggle';
+export * from './timezone';
+export * from './user-dropdown';

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { LanguageOption } from '@melt-js/libs-vben/constants';
+import type { SupportedLanguagesType } from '@melt-js/libs-vben/locales';
+
+import { onUnmounted, ref } from 'vue';
+
+import { onSupportLanguagesChange } from '@melt-js/libs-vben/constants';
+import { Languages } from '@melt-js/libs-vben/icons';
+import { loadLocaleMessages } from '@melt-js/libs-vben/locales';
+import { preferences, updatePreferences } from '@melt-js/libs-vben/preferences';
+
+import { VbenDropdownRadioMenu, VbenIconButton } from '@melt-js/comps-vben/shadcn-ui';
+
+defineOptions({
+  name: 'LanguageToggle',
+});
+
+const languageList = ref<LanguageOption[]>([]);
+const unsubscribe = onSupportLanguagesChange((langs) => {
+  languageList.value = [...langs];
+});
+onUnmounted(unsubscribe);
+
+async function handleUpdate(value: string | undefined) {
+  if (!value) return;
+  const locale = value as SupportedLanguagesType;
+  updatePreferences({
+    app: {
+      locale,
+    },
+  });
+  await loadLocaleMessages(locale);
+}
+</script>
+
+<template>
+  <div>
+    <VbenDropdownRadioMenu
+      :menus="languageList"
+      :model-value="preferences.app.locale"
+      @update:model-value="handleUpdate"
+    >
+      <VbenIconButton class="hover:animate-[shrink_0.3s_ease-in-out]">
+        <Languages class="size-4 text-foreground" />
+      </VbenIconButton>
+    </VbenDropdownRadioMenu>
+  </div>
+</template>

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { AuthPageLayoutType } from '@melt-js/libs-vben/types';
+
+import type { VbenDropdownMenuItem } from '@melt-js/comps-vben/shadcn-ui';
+
+import { computed } from 'vue';
+
+import { InspectionPanel, PanelLeft, PanelRight } from '@melt-js/libs-vben/icons';
+import { $t } from '@melt-js/libs-vben/locales';
+import {
+  preferences,
+  updatePreferences,
+  usePreferences,
+} from '@melt-js/libs-vben/preferences';
+
+import { VbenDropdownRadioMenu, VbenIconButton } from '@melt-js/comps-vben/shadcn-ui';
+
+defineOptions({
+  name: 'AuthenticationLayoutToggle',
+});
+
+const menus = computed((): VbenDropdownMenuItem[] => [
+  {
+    icon: PanelLeft,
+    label: $t('authentication.layout.alignLeft'),
+    value: 'panel-left',
+  },
+  {
+    icon: InspectionPanel,
+    label: $t('authentication.layout.center'),
+    value: 'panel-center',
+  },
+  {
+    icon: PanelRight,
+    label: $t('authentication.layout.alignRight'),
+    value: 'panel-right',
+  },
+]);
+
+const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
+
+function handleUpdate(value: string | undefined) {
+  if (!value) return;
+  updatePreferences({
+    app: {
+      authPageLayout: value as AuthPageLayoutType,
+    },
+  });
+}
+</script>
+
+<template>
+  <VbenDropdownRadioMenu
+    :menus="menus"
+    :model-value="preferences.app.authPageLayout"
+    @update:model-value="handleUpdate"
+  >
+    <VbenIconButton>
+      <PanelRight v-if="authPanelRight" class="size-4" />
+      <PanelLeft v-if="authPanelLeft" class="size-4" />
+      <InspectionPanel v-if="authPanelCenter" class="size-4" />
+    </VbenIconButton>
+  </VbenDropdownRadioMenu>
+</template>

package/src/layouts/widgets/lock-screen/index.ts

@@ -0,0 +1,2 @@
+export { default as LockScreenModal } from './lock-screen-modal.vue';
+export { default as LockScreen } from './lock-screen.vue';

package/src/layouts/widgets/lock-screen/lock-screen-modal.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import type { Recordable } from '@melt-js/libs-vben/types';
+
+import { computed, reactive } from 'vue';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import { useVbenForm, z } from '@melt-js/comps-vben/form-ui';
+import { useVbenModal } from '@melt-js/comps-vben/popup-ui';
+import { VbenAvatar, VbenButton } from '@melt-js/comps-vben/shadcn-ui';
+
+interface Props {
+  avatar?: string;
+  text?: string;
+}
+
+defineOptions({
+  name: 'LockScreenModal',
+});
+
+withDefaults(defineProps<Props>(), {
+  avatar: '',
+  text: '',
+});
+
+const emit = defineEmits<{
+  submit: [Recordable<any>];
+}>();
+
+const [Form, { resetForm, validate, getValues, getFieldComponentRef }] =
+  useVbenForm(
+    reactive({
+      commonConfig: {
+        hideLabel: true,
+        hideRequiredMark: true,
+      },
+      schema: computed(() => [
+        {
+          component: 'VbenInputPassword' as const,
+          componentProps: {
+            placeholder: $t('ui.widgets.lockScreen.placeholder'),
+          },
+          fieldName: 'lockScreenPassword',
+          formFieldProps: { validateOn: ['change'] as const },
+          label: $t('authentication.password'),
+          rules: z
+            .string()
+            .min(1, { message: $t('ui.widgets.lockScreen.placeholder') }),
+        },
+      ]),
+      showDefaultActions: false,
+    }),
+  );
+
+const [Modal] = useVbenModal({
+  onConfirm() {
+    handleSubmit();
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      resetForm();
+    }
+  },
+  onOpened() {
+    requestAnimationFrame(() => {
+      getFieldComponentRef('lockScreenPassword')
+        ?.$el?.querySelector('[name="lockScreenPassword"]')
+        ?.focus();
+    });
+  },
+});
+
+async function handleSubmit() {
+  const { valid } = await validate();
+  const values = await getValues();
+  if (valid) {
+    emit('submit', values?.lockScreenPassword);
+  }
+}
+</script>
+
+<template>
+  <Modal
+    :footer="false"
+    :fullscreen-button="false"
+    :title="$t('ui.widgets.lockScreen.title')"
+  >
+    <div
+      class="mb-10 flex w-full flex-col items-center px-10"
+      @keydown.enter.prevent="handleSubmit"
+    >
+      <div class="w-full">
+        <div class="ml-2 flex w-full flex-col items-center">
+          <VbenAvatar
+            :src="avatar"
+            class="size-20"
+            dot-class="bottom-0 right-1 border-2 size-4 bg-green-500"
+          />
+          <div class="my-6 flex items-center font-medium text-foreground">
+            {{ text }}
+          </div>
+        </div>
+        <Form />
+        <VbenButton class="mt-1 w-full" @click="handleSubmit">
+          {{ $t('ui.widgets.lockScreen.screenButton') }}
+        </VbenButton>
+      </div>
+    </div>
+  </Modal>
+</template>

package/src/layouts/widgets/lock-screen/lock-screen.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue';
+
+import { LockKeyhole } from '@melt-js/libs-vben/icons';
+import { $t, useI18n } from '@melt-js/libs-vben/locales';
+import { storeToRefs, useAccessStore } from '@melt-js/libs-vben/stores';
+
+import { useScrollLock } from '@melt-js/libs-vben/composables';
+import { useVbenForm, z } from '@melt-js/comps-vben/form-ui';
+import { VbenAvatar, VbenButton } from '@melt-js/comps-vben/shadcn-ui';
+
+import { useDateFormat, useNow } from '@vueuse/core';
+
+interface Props {
+  avatar?: string;
+}
+
+defineOptions({
+  name: 'LockScreen',
+});
+
+withDefaults(defineProps<Props>(), {
+  avatar: '',
+});
+
+defineEmits<{ toLogin: [] }>();
+
+const { locale } = useI18n();
+const accessStore = useAccessStore();
+
+const now = useNow();
+const meridiem = useDateFormat(now, 'A');
+const hour = useDateFormat(now, 'HH');
+const minute = useDateFormat(now, 'mm');
+const date = useDateFormat(now, 'YYYY-MM-DD dddd', { locales: locale.value });
+
+const showUnlockForm = ref(false);
+const { lockScreenPassword } = storeToRefs(accessStore);
+
+const [Form, { getFieldComponentRef, getRawValues, setFieldError, validate }] =
+  useVbenForm(
+    reactive({
+      commonConfig: {
+        hideLabel: true,
+        hideRequiredMark: true,
+      },
+      schema: computed(() => [
+        {
+          component: 'VbenInputPassword' as const,
+          componentProps: {
+            placeholder: $t('ui.widgets.lockScreen.placeholder'),
+          },
+          fieldName: 'password',
+          label: $t('authentication.password'),
+          rules: z
+            .string()
+            .min(1, { message: $t('authentication.passwordTip') }),
+        },
+      ]),
+      showDefaultActions: false,
+    }),
+  );
+
+async function handleSubmit() {
+  const { valid } = await validate();
+  if (valid) {
+    const { password } = await getRawValues();
+    if (lockScreenPassword?.value === password) {
+      accessStore.unlockScreen();
+    } else {
+      await setFieldError('password', $t('authentication.passwordErrorTip'));
+    }
+  }
+}
+
+function toggleUnlockForm() {
+  showUnlockForm.value = !showUnlockForm.value;
+  if (showUnlockForm.value) {
+    requestAnimationFrame(() => {
+      getFieldComponentRef('password')
+        ?.$el?.querySelector('[name="password"]')
+        ?.focus();
+    });
+  }
+}
+
+useScrollLock();
+</script>
+
+<template>
+  <div class="fixed z-2000 size-full bg-background">
+    <transition name="slide-left">
+      <div v-show="!showUnlockForm" class="size-full">
+        <div
+          class="group fixed top-6 left-1/2 z-2001 flex-col-center -translate-x-1/2 cursor-pointer text-xl font-semibold text-foreground/80 hover:text-foreground"
+          @click="toggleUnlockForm"
+        >
+          <LockKeyhole
+            class="size-5 transition-all duration-300 group-hover:scale-125"
+          />
+          <span>{{ $t('ui.widgets.lockScreen.unlock') }}</span>
+        </div>
+        <div class="flex-center size-full">
+          <div class="flex w-full justify-center gap-4 px-4 sm:gap-6 md:gap-8">
+            <div
+              class="relative flex-center h-35 w-35 rounded-xl bg-accent text-[36px] sm:h-40 sm:w-40 sm:text-[42px] md:h-50 md:w-50 md:text-[72px]"
+            >
+              <span
+                class="absolute top-3 left-3 text-xs font-semibold sm:text-sm md:text-xl"
+              >
+                {{ meridiem }}
+              </span>
+              {{ hour }}
+            </div>
+            <div
+              class="flex-center h-35 w-35 rounded-xl bg-accent text-[36px] sm:h-40 sm:w-40 sm:text-[42px] md:h-50 md:w-50 md:text-[72px]"
+            >
+              {{ minute }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+
+    <transition name="slide-right">
+      <div
+        v-if="showUnlockForm"
+        class="flex-center size-full"
+        @keydown.enter.prevent="handleSubmit"
+      >
+        <div class="mb-10 flex-col-center w-[90%] max-w-75 px-4">
+          <VbenAvatar :src="avatar" class="enter-x mb-6 size-20" />
+          <div class="enter-x mb-2 w-full items-center">
+            <Form />
+          </div>
+          <VbenButton class="enter-x w-full" @click="handleSubmit">
+            {{ $t('ui.widgets.lockScreen.entry') }}
+          </VbenButton>
+          <VbenButton
+            class="enter-x my-2 w-full"
+            variant="ghost"
+            @click="$emit('toLogin')"
+          >
+            {{ $t('ui.widgets.lockScreen.backToLogin') }}
+          </VbenButton>
+          <VbenButton
+            class="enter-x mr-2 w-full"
+            variant="ghost"
+            @click="toggleUnlockForm"
+          >
+            {{ $t('common.back') }}
+          </VbenButton>
+        </div>
+      </div>
+    </transition>
+
+    <div
+      class="enter-y absolute bottom-5 w-full text-center text-xl md:text-2xl xl:text-xl 2xl:text-3xl"
+    >
+      <div v-if="showUnlockForm" class="enter-x mb-2 text-2xl md:text-3xl">
+        {{ hour }}:{{ minute }}
+        <span class="text-base md:text-lg">{{ meridiem }}</span>
+      </div>
+      <div class="text-xl md:text-3xl">{{ date }}</div>
+    </div>
+  </div>
+</template>