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

package/src/layouts/widgets/preferences/blocks/layout/sidebar.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { LayoutType } from '@melt-js/libs-vben/types';
+
+import { onMounted } from 'vue';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import CheckboxItem from '../checkbox-item.vue';
+import NumberFieldItem from '../number-field-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+defineProps<{ currentLayout?: LayoutType; disabled: boolean }>();
+
+const sidebarEnable = defineModel<boolean>('sidebarEnable');
+const sidebarWidth = defineModel<number | undefined>('sidebarWidth', {
+  default: undefined,
+});
+const sidebarCollapsedShowTitle = defineModel<boolean>(
+  'sidebarCollapsedShowTitle',
+);
+const sidebarAutoActivateChild = defineModel<boolean>(
+  'sidebarAutoActivateChild',
+);
+const sidebarDraggable = defineModel<boolean>('sidebarDraggable');
+const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
+const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
+
+const sidebarButtons = defineModel<string[]>('sidebarButtons', {
+  default: () => [],
+});
+const sidebarCollapsedButton = defineModel<boolean>('sidebarCollapsedButton');
+const sidebarFixedButton = defineModel<boolean>('sidebarFixedButton');
+
+onMounted(() => {
+  if (
+    sidebarCollapsedButton.value &&
+    !sidebarButtons.value.includes('collapsed')
+  ) {
+    sidebarButtons.value.push('collapsed');
+  }
+  if (sidebarFixedButton.value && !sidebarButtons.value.includes('fixed')) {
+    sidebarButtons.value.push('fixed');
+  }
+});
+
+const handleCheckboxChange = () => {
+  sidebarCollapsedButton.value = !!sidebarButtons.value.includes('collapsed');
+  sidebarFixedButton.value = !!sidebarButtons.value.includes('fixed');
+};
+</script>
+
+<template>
+  <SwitchItem v-model="sidebarEnable" :disabled="disabled">
+    {{ $t('preferences.sidebar.visible') }}
+  </SwitchItem>
+  <SwitchItem v-model="sidebarDraggable" :disabled="!sidebarEnable || disabled">
+    {{ $t('preferences.sidebar.draggable') }}
+  </SwitchItem>
+  <SwitchItem v-model="sidebarCollapsed" :disabled="!sidebarEnable || disabled">
+    {{ $t('preferences.sidebar.collapsed') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="sidebarExpandOnHover"
+    :disabled="!sidebarEnable || disabled || !sidebarCollapsed"
+    :tip="$t('preferences.sidebar.expandOnHoverTip')"
+  >
+    {{ $t('preferences.sidebar.expandOnHover') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="sidebarCollapsedShowTitle"
+    :disabled="!sidebarEnable || disabled || !sidebarCollapsed"
+  >
+    {{ $t('preferences.sidebar.collapsedShowTitle') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="sidebarAutoActivateChild"
+    :disabled="
+      !sidebarEnable ||
+      !['sidebar-mixed-nav', 'mixed-nav', 'header-mixed-nav'].includes(
+        currentLayout as string,
+      ) ||
+      disabled
+    "
+    :tip="$t('preferences.sidebar.autoActivateChildTip')"
+  >
+    {{ $t('preferences.sidebar.autoActivateChild') }}
+  </SwitchItem>
+  <CheckboxItem
+    :items="[
+      { label: $t('preferences.sidebar.buttonCollapsed'), value: 'collapsed' },
+      { label: $t('preferences.sidebar.buttonFixed'), value: 'fixed' },
+    ]"
+    multiple
+    v-model="sidebarButtons"
+    :on-btn-click="handleCheckboxChange"
+  >
+    {{ $t('preferences.sidebar.buttons') }}
+  </CheckboxItem>
+  <NumberFieldItem
+    v-model="sidebarWidth"
+    :disabled="!sidebarEnable || disabled"
+    :max="320"
+    :min="160"
+    :step="10"
+  >
+    {{ $t('preferences.sidebar.width') }}
+  </NumberFieldItem>
+</template>

package/src/layouts/widgets/preferences/blocks/layout/tabbar.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { SelectOption } from '@melt-js/libs-vben/types';
+
+import { computed } from 'vue';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import NumberFieldItem from '../number-field-item.vue';
+import SelectItem from '../select-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceTabsConfig',
+});
+
+defineProps<{ disabled?: boolean }>();
+
+const tabbarEnable = defineModel<boolean>('tabbarEnable');
+const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
+const tabbarPersist = defineModel<boolean>('tabbarPersist');
+const tabbarVisitHistory = defineModel<boolean>('tabbarVisitHistory');
+const tabbarDraggable = defineModel<boolean>('tabbarDraggable');
+const tabbarWheelable = defineModel<boolean>('tabbarWheelable');
+const tabbarStyleType = defineModel<string | undefined>('tabbarStyleType', {
+  default: undefined,
+});
+const tabbarShowMore = defineModel<boolean>('tabbarShowMore');
+const tabbarShowMaximize = defineModel<boolean>('tabbarShowMaximize');
+const tabbarMaxCount = defineModel<number | undefined>('tabbarMaxCount', {
+  default: undefined,
+});
+const tabbarMiddleClickToClose = defineModel<boolean>(
+  'tabbarMiddleClickToClose',
+);
+
+const styleItems = computed((): SelectOption[] => [
+  {
+    label: $t('preferences.tabbar.styleType.chrome'),
+    value: 'chrome',
+  },
+  {
+    label: $t('preferences.tabbar.styleType.plain'),
+    value: 'plain',
+  },
+  {
+    label: $t('preferences.tabbar.styleType.card'),
+    value: 'card',
+  },
+
+  {
+    label: $t('preferences.tabbar.styleType.brisk'),
+    value: 'brisk',
+  },
+]);
+</script>
+
+<template>
+  <SwitchItem v-model="tabbarEnable" :disabled="disabled">
+    {{ $t('preferences.tabbar.enable') }}
+  </SwitchItem>
+  <SwitchItem v-model="tabbarPersist" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.persist') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="tabbarVisitHistory"
+    :disabled="!tabbarEnable"
+    :tip="$t('preferences.tabbar.visitHistoryTip')"
+  >
+    {{ $t('preferences.tabbar.visitHistory') }}
+  </SwitchItem>
+  <NumberFieldItem
+    v-model="tabbarMaxCount"
+    :disabled="!tabbarEnable"
+    :max="30"
+    :min="0"
+    :step="5"
+    :tip="$t('preferences.tabbar.maxCountTip')"
+  >
+    {{ $t('preferences.tabbar.maxCount') }}
+  </NumberFieldItem>
+  <SwitchItem v-model="tabbarDraggable" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.draggable') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="tabbarWheelable"
+    :disabled="!tabbarEnable"
+    :tip="$t('preferences.tabbar.wheelableTip')"
+  >
+    {{ $t('preferences.tabbar.wheelable') }}
+  </SwitchItem>
+  <SwitchItem v-model="tabbarMiddleClickToClose" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.middleClickClose') }}
+  </SwitchItem>
+  <SwitchItem v-model="tabbarShowIcon" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.icon') }}
+  </SwitchItem>
+  <SwitchItem v-model="tabbarShowMore" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.showMore') }}
+  </SwitchItem>
+  <SwitchItem v-model="tabbarShowMaximize" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.showMaximize') }}
+  </SwitchItem>
+  <SelectItem v-model="tabbarStyleType" :items="styleItems">
+    {{ $t('preferences.tabbar.styleType.title') }}
+  </SelectItem>
+</template>

package/src/layouts/widgets/preferences/blocks/layout/widget.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import type { PreferencesButtonPositionType, SelectOption } from '@melt-js/libs-vben/types';
+
+import { computed } from 'vue';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import DraggableList from '../draggable-list.vue';
+
+defineOptions({
+  name: 'PreferenceInterfaceControl',
+});
+
+const widgetOrder = defineModel<string[]>('widgetOrder', { required: true });
+
+const widgetGlobalSearchButtonPosition = defineModel<string | undefined>(
+  'widgetGlobalSearchButtonPosition',
+  { default: undefined },
+);
+const widgetFullscreenButtonPosition = defineModel<string | undefined>(
+  'widgetFullscreenButtonPosition',
+  { default: undefined },
+);
+const widgetLanguageToggleButtonPosition = defineModel<string | undefined>(
+  'widgetLanguageToggleButtonPosition',
+  { default: undefined },
+);
+const widgetNotificationButtonPosition = defineModel<string | undefined>(
+  'widgetNotificationButtonPosition',
+  { default: undefined },
+);
+const widgetThemeToggleButtonPosition = defineModel<string | undefined>(
+  'widgetThemeToggleButtonPosition',
+  { default: undefined },
+);
+const widgetLockScreenButtonPosition = defineModel<string | undefined>(
+  'widgetLockScreenButtonPosition',
+  { default: undefined },
+);
+const widgetLogoutButtonPosition = defineModel<string | undefined>(
+  'widgetLogoutButtonPosition',
+  { default: undefined },
+);
+const widgetRefreshButtonPosition = defineModel<string | undefined>(
+  'widgetRefreshButtonPosition',
+  { default: undefined },
+);
+const widgetTimezoneButtonPosition = defineModel<string | undefined>(
+  'widgetTimezoneButtonPosition',
+  { default: undefined },
+);
+const appPreferencesButtonPosition = defineModel<
+  PreferencesButtonPositionType | undefined
+>('appPreferencesButtonPosition', { default: undefined });
+
+const buttonPositionItems = computed((): SelectOption[] => [
+  {
+    label: $t('preferences.widget.header'),
+    value: 'header',
+  },
+  {
+    label: $t('preferences.widget.userDropdown'),
+    value: 'user-dropdown',
+  },
+  {
+    label: $t('common.notShow'),
+    value: 'none',
+  },
+]);
+
+/**
+ * preferences 按钮独享的位置选项：
+ * 保留 auto/fixed 让 use-preferences.ts 的智能 fallback 生效
+ * （移动端/全屏内容模式下自动切换 header/fixed，避免偏好入口死锁）
+ */
+const preferencesPositionItems = computed((): SelectOption[] => [
+  {
+    label: $t('preferences.position.auto'),
+    value: 'auto',
+  },
+  {
+    label: $t('preferences.position.header'),
+    value: 'header',
+  },
+  {
+    label: $t('preferences.position.fixed'),
+    value: 'fixed',
+  },
+  {
+    label: $t('preferences.position.userDropdown'),
+    value: 'user-dropdown',
+  },
+  {
+    label: $t('common.notShow'),
+    value: 'none',
+  },
+]);
+
+const positionMap: Record<string, string> = {
+  globalSearch: 'widgetGlobalSearchButtonPosition',
+  preferences: 'appPreferencesButtonPosition',
+  themeToggle: 'widgetThemeToggleButtonPosition',
+  languageToggle: 'widgetLanguageToggleButtonPosition',
+  timezone: 'widgetTimezoneButtonPosition',
+  fullscreen: 'widgetFullscreenButtonPosition',
+  refresh: 'widgetRefreshButtonPosition',
+  notification: 'widgetNotificationButtonPosition',
+  lockScreenBtn: 'widgetLockScreenButtonPosition',
+  logoutBtn: 'widgetLogoutButtonPosition',
+};
+
+const labelMap: Record<string, string> = {
+  globalSearch: 'preferences.widget.globalSearch',
+  preferences: 'preferences.title',
+  themeToggle: 'preferences.widget.themeToggle',
+  languageToggle: 'preferences.widget.languageToggle',
+  timezone: 'preferences.widget.timezone',
+  fullscreen: 'preferences.widget.fullscreen',
+  refresh: 'preferences.widget.refresh',
+  notification: 'preferences.widget.notification',
+  lockScreenBtn: 'ui.widgets.lockScreen.title',
+  logoutBtn: 'common.logout',
+};
+
+const draggableItems = computed(() =>
+  (widgetOrder.value ?? []).map((key) => ({
+    key,
+    label: $t(labelMap[key] ?? key),
+    position: getPosition(key),
+    positionItems:
+      key === 'preferences' ? preferencesPositionItems.value : undefined,
+  })),
+);
+
+function getPosition(
+  key: string,
+): 'auto' | 'fixed' | 'header' | 'none' | 'user-dropdown' {
+  const modelName = positionMap[key];
+  if (!modelName) return 'none';
+  const modelMap: Record<string, any> = {
+    widgetGlobalSearchButtonPosition,
+    widgetFullscreenButtonPosition,
+    widgetLanguageToggleButtonPosition,
+    widgetNotificationButtonPosition,
+    widgetThemeToggleButtonPosition,
+    widgetLockScreenButtonPosition,
+    widgetLogoutButtonPosition,
+    widgetRefreshButtonPosition,
+    widgetTimezoneButtonPosition,
+    appPreferencesButtonPosition,
+  };
+  return modelMap[modelName]?.value ?? 'none';
+}
+
+function handleUpdateOrder(keys: string[]) {
+  widgetOrder.value = keys;
+}
+
+function handleUpdatePosition(
+  key: string,
+  position: 'auto' | 'fixed' | 'header' | 'none' | 'user-dropdown',
+) {
+  const modelName = positionMap[key];
+  if (!modelName) return;
+  const modelMap: Record<string, any> = {
+    widgetGlobalSearchButtonPosition,
+    widgetFullscreenButtonPosition,
+    widgetLanguageToggleButtonPosition,
+    widgetNotificationButtonPosition,
+    widgetThemeToggleButtonPosition,
+    widgetLockScreenButtonPosition,
+    widgetLogoutButtonPosition,
+    widgetRefreshButtonPosition,
+    widgetTimezoneButtonPosition,
+    appPreferencesButtonPosition,
+  };
+  modelMap[modelName].value = position;
+}
+</script>
+
+<template>
+  <DraggableList
+    :items="draggableItems"
+    :position-items="buttonPositionItems"
+    @update-order="handleUpdateOrder"
+    @update-position="handleUpdatePosition"
+  />
+</template>

package/src/layouts/widgets/preferences/blocks/number-field-item.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { SelectOption } from '@melt-js/libs-vben/types';
+
+import { useSlots } from 'vue';
+
+import { CircleHelp } from '@melt-js/libs-vben/icons';
+
+import {
+  NumberField,
+  NumberFieldContent,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  VbenTooltip,
+} from '@melt-js/comps-vben/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceSelectItem',
+});
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    items?: SelectOption[];
+    placeholder?: string;
+    tip?: string;
+  }>(),
+  {
+    disabled: false,
+    placeholder: '',
+    tip: '',
+    items: () => [],
+  },
+);
+
+const inputValue = defineModel<number | undefined>({ default: undefined });
+
+const slots = useSlots();
+</script>
+
+<template>
+  <div
+    :class="{
+      'hover:bg-accent': !slots.tip,
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
+  >
+    <span class="flex items-center text-sm">
+      <slot></slot>
+
+      <VbenTooltip v-if="slots.tip || tip" side="bottom">
+        <template #trigger>
+          <CircleHelp class="ml-1 size-3 cursor-help" />
+        </template>
+        <slot name="tip">
+          <template v-if="tip">
+            <p v-for="(line, index) in tip.split('\n')" :key="index">
+              {{ line }}
+            </p>
+          </template>
+        </slot>
+      </VbenTooltip>
+    </span>
+
+    <NumberField v-model="inputValue" v-bind="$attrs" class="w-41.25">
+      <NumberFieldContent>
+        <NumberFieldDecrement />
+        <NumberFieldInput />
+        <NumberFieldIncrement />
+      </NumberFieldContent>
+    </NumberField>
+  </div>
+</template>

package/src/layouts/widgets/preferences/blocks/select-item.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { SelectOption } from '@melt-js/libs-vben/types';
+
+import { useSlots } from 'vue';
+
+import { CircleHelp } from '@melt-js/libs-vben/icons';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  VbenTooltip,
+} from '@melt-js/comps-vben/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceSelectItem',
+});
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    items?: SelectOption[];
+    placeholder?: string;
+    tip?: string;
+  }>(),
+  {
+    disabled: false,
+    placeholder: '',
+    tip: '',
+    items: () => [],
+  },
+);
+
+const selectValue = defineModel<string | undefined>({ default: undefined });
+
+const slots = useSlots();
+</script>
+
+<template>
+  <div
+    :class="{
+      'hover:bg-accent': !(slots.tip || tip),
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
+  >
+    <span class="flex items-center text-sm">
+      <slot></slot>
+
+      <VbenTooltip v-if="slots.tip || tip" side="bottom">
+        <template #trigger>
+          <CircleHelp class="ml-1 size-3 cursor-help" />
+        </template>
+        <slot name="tip">
+          <template v-if="tip">
+            <p v-for="(line, index) in tip.split('\n')" :key="index">
+              {{ line }}
+            </p>
+          </template>
+        </slot>
+      </VbenTooltip>
+    </span>
+    <Select v-model="selectValue">
+      <SelectTrigger class="h-8 w-41.25">
+        <SelectValue :placeholder="placeholder" />
+      </SelectTrigger>
+      <SelectContent>
+        <template v-for="item in items" :key="item.value">
+          <SelectItem :value="item.value"> {{ item.label }} </SelectItem>
+        </template>
+      </SelectContent>
+    </Select>
+  </div>
+</template>

package/src/layouts/widgets/preferences/blocks/shortcut-keys/global.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { $t } from '@melt-js/libs-vben/locales';
+import { isWindowsOs } from '@melt-js/libs-vben/utils';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceGeneralConfig',
+});
+
+const shortcutKeysEnable = defineModel<boolean>('shortcutKeysEnable');
+const shortcutKeysGlobalSearch = defineModel<boolean>(
+  'shortcutKeysGlobalSearch',
+);
+const shortcutKeysLogout = defineModel<boolean>('shortcutKeysLogout');
+// const shortcutKeysPreferences = defineModel<boolean>('shortcutKeysPreferences');
+const shortcutKeysLockScreen = defineModel<boolean>('shortcutKeysLockScreen');
+const shortcutKeysEscape = defineModel<boolean>('shortcutKeysEscape');
+
+const altView = computed(() => (isWindowsOs() ? 'Alt' : '⌥'));
+</script>
+
+<template>
+  <SwitchItem v-model="shortcutKeysEnable">
+    {{ $t('preferences.shortcutKeys.title') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="shortcutKeysGlobalSearch"
+    :disabled="!shortcutKeysEnable"
+  >
+    {{ $t('preferences.shortcutKeys.search') }}
+    <template #shortcut>
+      {{ isWindowsOs() ? 'Ctrl' : '⌘' }}
+      <kbd> K </kbd>
+    </template>
+  </SwitchItem>
+  <SwitchItem v-model="shortcutKeysLogout" :disabled="!shortcutKeysEnable">
+    {{ $t('preferences.shortcutKeys.logout') }}
+    <template #shortcut> {{ altView }} Q </template>
+  </SwitchItem>
+  <!-- <SwitchItem v-model="shortcutKeysPreferences" :disabled="!shortcutKeysEnable">
+    {{ $t('preferences.shortcutKeys.preferences') }}
+    <template #shortcut> {{ altView }} , </template>
+  </SwitchItem> -->
+  <SwitchItem v-model="shortcutKeysLockScreen" :disabled="!shortcutKeysEnable">
+    {{ $t('ui.widgets.lockScreen.title') }}
+    <template #shortcut> {{ altView }} L </template>
+  </SwitchItem>
+  <SwitchItem v-model="shortcutKeysEscape" :disabled="!shortcutKeysEnable">
+    {{ $t('preferences.shortcutKeys.escape') }}
+    <template #shortcut> Esc </template>
+  </SwitchItem>
+</template>

package/src/layouts/widgets/preferences/blocks/switch-item.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useSlots } from 'vue';
+
+import { CircleHelp } from '@melt-js/libs-vben/icons';
+
+import { Switch, VbenTooltip } from '@melt-js/comps-vben/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceSwitchItem',
+});
+
+withDefaults(defineProps<{ disabled?: boolean; tip?: string }>(), {
+  disabled: false,
+  tip: '',
+});
+
+const checked = defineModel<boolean>();
+
+const slots = useSlots();
+
+function handleClick() {
+  checked.value = !checked.value;
+}
+</script>
+
+<template>
+  <div
+    :class="{
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-2.5 hover:bg-accent"
+    @click="handleClick"
+  >
+    <span class="flex items-center text-sm">
+      <slot></slot>
+
+      <VbenTooltip v-if="slots.tip || tip" side="bottom">
+        <template #trigger>
+          <CircleHelp class="ml-1 size-3 cursor-help pointer-events-auto" />
+        </template>
+        <slot name="tip">
+          <template v-if="tip">
+            <p v-for="(line, index) in tip.split('\n')" :key="index">
+              {{ line }}
+            </p>
+          </template>
+        </slot>
+      </VbenTooltip>
+    </span>
+    <span v-if="$slots.shortcut" class="mr-2 ml-auto text-xs opacity-60">
+      <slot name="shortcut"></slot>
+    </span>
+    <Switch v-model="checked" @click.stop />
+  </div>
+</template>