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

package/src/layouts/widgets/notification/index.ts

@@ -0,0 +1,3 @@
+export { default as Notification } from './notification.vue';
+
+export type * from './types';

package/src/layouts/widgets/notification/notification.vue

@@ -0,0 +1,210 @@
+<script lang="ts" setup>
+import type { NotificationItem } from './types';
+
+import { Bell, CircleCheckBig, CircleX, MailCheck } from '@melt-js/libs-vben/icons';
+import { $t } from '@melt-js/libs-vben/locales';
+
+import {
+  VbenButton,
+  VbenIconButton,
+  VbenPopover,
+  VbenScrollbar,
+} from '@melt-js/comps-vben/shadcn-ui';
+
+import { useToggle } from '@vueuse/core';
+
+defineOptions({ name: 'NotificationPopup' });
+
+withDefaults(
+  defineProps<{
+    /** 显示圆点 */
+    dot?: boolean;
+    /** 消息列表 */
+    notifications?: NotificationItem[];
+  }>(),
+  {
+    dot: false,
+    notifications: () => [],
+  },
+);
+
+const emit = defineEmits<{
+  clear: [];
+  makeAll: [];
+  onClick: [NotificationItem];
+  read: [NotificationItem];
+  remove: [NotificationItem];
+  viewAll: [];
+}>();
+
+const [open, toggle] = useToggle();
+
+const close = () => {
+  open.value = false;
+};
+
+function handleViewAll() {
+  emit('viewAll');
+  close();
+}
+
+function handleMakeAll() {
+  emit('makeAll');
+}
+
+function handleClear() {
+  emit('clear');
+}
+
+defineExpose({ toggle });
+</script>
+<template>
+  <VbenPopover v-model:open="open" content-class="relative right-2 w-90 p-0">
+    <template #trigger>
+      <div class="mr-2 flex-center h-full" @click.stop="toggle()">
+        <VbenIconButton class="bell-button relative text-foreground">
+          <span
+            v-if="dot"
+            class="absolute top-0.5 right-0.5 size-2 rounded-full bg-primary"
+          ></span>
+          <Bell class="size-4" />
+        </VbenIconButton>
+      </div>
+    </template>
+
+    <div class="relative">
+      <div class="flex items-center justify-between p-4 py-3">
+        <div class="text-foreground">{{ $t('ui.widgets.notifications') }}</div>
+        <VbenIconButton
+          :disabled="notifications.length <= 0"
+          :tooltip="$t('ui.widgets.markAllAsRead')"
+          @click="handleMakeAll"
+        >
+          <MailCheck class="size-4" />
+        </VbenIconButton>
+      </div>
+      <VbenScrollbar v-if="notifications.length > 0">
+        <ul class="flex! max-h-90 w-full flex-col">
+          <template v-for="item in notifications" :key="item.id ?? item.title">
+            <li
+              class="relative flex w-full cursor-pointer items-start gap-5 border-t border-border p-3 hover:bg-accent"
+              @click="emit('onClick', item)"
+            >
+              <slot name="content" :item="item">
+                <span
+                  v-if="!item.isRead"
+                  class="absolute top-2 right-2 size-2 rounded-sm bg-primary"
+                ></span>
+
+                <span
+                  class="relative flex size-10 shrink-0 overflow-hidden rounded-full"
+                >
+                  <img
+                    :src="item.avatar"
+                    class="aspect-square size-full object-cover"
+                  />
+                </span>
+                <div class="flex flex-col gap-1 leading-none">
+                  <p class="font-semibold">{{ item.title }}</p>
+                  <p class="my-1 line-clamp-2 text-xs text-muted-foreground">
+                    {{ item.message }}
+                  </p>
+                  <p class="line-clamp-2 text-xs text-muted-foreground">
+                    {{ item.date }}
+                  </p>
+                </div>
+                <div
+                  class="absolute top-1/2 right-3 flex -translate-y-1/2 flex-row gap-1"
+                >
+                  <slot name="action" :item="item">
+                    <slot name="action-prepend" :item="item"></slot>
+                    <VbenIconButton
+                      v-if="!item.isRead"
+                      size="xs"
+                      variant="ghost"
+                      class="h-6 px-2"
+                      :tooltip="$t('common.confirm')"
+                      @click.stop="emit('read', item)"
+                    >
+                      <CircleCheckBig class="size-4" />
+                    </VbenIconButton>
+                    <VbenIconButton
+                      v-if="item.isRead"
+                      size="xs"
+                      variant="ghost"
+                      class="h-6 px-2 text-destructive"
+                      :tooltip="$t('common.delete')"
+                      @click.stop="emit('remove', item)"
+                    >
+                      <CircleX class="size-4" />
+                    </VbenIconButton>
+                    <slot name="action-append" :item="item"></slot>
+                  </slot>
+                </div>
+              </slot>
+            </li>
+          </template>
+        </ul>
+      </VbenScrollbar>
+
+      <template v-else>
+        <div class="flex-center min-h-37.5 w-full text-muted-foreground">
+          {{ $t('common.noData') }}
+        </div>
+      </template>
+
+      <div
+        class="flex items-center justify-between border-t border-border px-4 py-3"
+      >
+        <VbenButton
+          :disabled="notifications.length <= 0"
+          size="sm"
+          variant="ghost"
+          @click="handleClear"
+        >
+          {{ $t('ui.widgets.clearNotifications') }}
+        </VbenButton>
+        <VbenButton size="sm" @click="handleViewAll">
+          {{ $t('ui.widgets.viewAll') }}
+        </VbenButton>
+      </div>
+    </div>
+  </VbenPopover>
+</template>
+
+<style scoped>
+:deep(.bell-button) {
+  &:hover {
+    svg {
+      animation: bell-ring 1s both;
+    }
+  }
+}
+
+@keyframes bell-ring {
+  0%,
+  100% {
+    transform-origin: top;
+  }
+
+  15% {
+    transform: rotateZ(10deg);
+  }
+
+  30% {
+    transform: rotateZ(-10deg);
+  }
+
+  45% {
+    transform: rotateZ(5deg);
+  }
+
+  60% {
+    transform: rotateZ(-5deg);
+  }
+
+  75% {
+    transform: rotateZ(2deg);
+  }
+}
+</style>

package/src/layouts/widgets/notification/types.ts

@@ -0,0 +1,19 @@
+interface NotificationItem {
+  id: number | string;
+  avatar: string;
+  date: string;
+  isRead?: boolean;
+  message: string;
+  title: string;
+  /**
+   * 跳转链接，可以是路由路径或完整 URL
+   * @example '/dashboard' 或 'https://example.com'
+   */
+  link?: string;
+  query?: Record<string, any>;
+  state?: Record<string, any>;
+  /** 业务字段 */
+  [key: string]: any;
+}
+
+export type { NotificationItem };

package/src/layouts/widgets/preferences/blocks/block.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+interface Props {
+  title?: string;
+}
+
+defineOptions({
+  name: 'PreferenceBlock',
+});
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+});
+</script>
+
+<template>
+  <div class="flex flex-col py-4">
+    <h3 class="mb-3 leading-none font-semibold tracking-tight">
+      {{ title }}
+    </h3>
+    <slot></slot>
+  </div>
+</template>

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

@@ -0,0 +1,63 @@
+<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 { VbenCheckButtonGroup, VbenTooltip } from '@melt-js/comps-vben/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceCheckboxItem',
+});
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    items?: SelectOption[];
+    multiple?: boolean;
+    onBtnClick?: (value: string) => void;
+    placeholder?: string;
+  }>(),
+  {
+    disabled: false,
+    placeholder: '',
+    items: () => [],
+    onBtnClick: () => {},
+    multiple: false,
+  },
+);
+
+const inputValue = defineModel<string[] | 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" side="bottom">
+        <template #trigger>
+          <CircleHelp class="ml-1 size-3 cursor-help" />
+        </template>
+        <slot name="tip"></slot>
+      </VbenTooltip>
+    </span>
+    <VbenCheckButtonGroup
+      v-model="inputValue"
+      class="h-8 w-41.25"
+      :options="items"
+      :disabled="disabled"
+      :multiple="multiple"
+      @btn-click="onBtnClick"
+    />
+  </div>
+</template>

package/src/layouts/widgets/preferences/blocks/custom/custom.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type {
+  CustomPreferencesField,
+  CustomPreferencesRecord,
+} from '@melt-js/libs-vben/preferences';
+
+import { computed } from 'vue';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import InputItem from '../input-item.vue';
+import NumberFieldItem from '../number-field-item.vue';
+import SelectItem from '../select-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceCustomFields',
+});
+
+const props = defineProps<{
+  fields: Array<CustomPreferencesField>;
+  values: CustomPreferencesRecord;
+}>();
+
+const emit = defineEmits<{
+  update: [updates: CustomPreferencesRecord];
+}>();
+
+function handleUpdate(key: string, value: boolean | number | string) {
+  emit('update', { [key]: value });
+}
+
+function handleBooleanUpdate(key: string, value: boolean | undefined) {
+  handleUpdate(key, value ?? false);
+}
+
+function resolveNumberValue(value: unknown) {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? value
+    : undefined;
+}
+
+function handleNumberUpdate(key: string, value: number | undefined) {
+  const resolvedValue = resolveNumberValue(value);
+
+  if (resolvedValue !== undefined) {
+    handleUpdate(key, resolvedValue);
+  }
+}
+
+function handleStringUpdate(key: string, value: string | undefined) {
+  handleUpdate(key, value ?? '');
+}
+
+const resolvedFields = computed(() => {
+  return props.fields.map((field) => {
+    return {
+      ...field,
+      label: $t(field.label),
+      options:
+        field.component === 'select'
+          ? field.options.map((option) => ({
+              ...option,
+              label: $t(option.label),
+            }))
+          : undefined,
+      placeholder: field.placeholder ? $t(field.placeholder) : '',
+      tip: field.tip ? $t(field.tip) : '',
+    };
+  });
+});
+</script>
+
+<template>
+  <template v-for="field in resolvedFields" :key="field.key">
+    <SwitchItem
+      v-if="field.component === 'switch'"
+      :disabled="field.disabled"
+      :model-value="Boolean(values[field.key])"
+      :tip="field.tip"
+      v-bind="field.componentProps"
+      @update:model-value="handleBooleanUpdate(field.key, $event)"
+    >
+      {{ field.label }}
+    </SwitchItem>
+    <NumberFieldItem
+      v-else-if="field.component === 'number'"
+      :disabled="field.disabled"
+      :model-value="resolveNumberValue(values[field.key])"
+      :placeholder="field.placeholder"
+      :tip="field.tip"
+      v-bind="field.componentProps"
+      @update:model-value="handleNumberUpdate(field.key, $event)"
+    >
+      {{ field.label }}
+    </NumberFieldItem>
+    <SelectItem
+      v-else-if="field.component === 'select'"
+      :disabled="field.disabled"
+      :items="field.options"
+      :model-value="String(values[field.key] ?? '')"
+      :placeholder="field.placeholder"
+      :tip="field.tip"
+      v-bind="field.componentProps"
+      @update:model-value="handleStringUpdate(field.key, $event)"
+    >
+      {{ field.label }}
+    </SelectItem>
+    <InputItem
+      v-else
+      :disabled="field.disabled"
+      :model-value="String(values[field.key] ?? '')"
+      :placeholder="field.placeholder"
+      :tip="field.tip"
+      v-bind="field.componentProps"
+      @update:model-value="handleStringUpdate(field.key, $event)"
+    >
+      {{ field.label }}
+    </InputItem>
+  </template>
+</template>

package/src/layouts/widgets/preferences/blocks/draggable-list.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { SelectOption } from '@melt-js/libs-vben/types';
+
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
+
+import { GripVertical } from '@melt-js/libs-vben/icons';
+import { $t } from '@melt-js/libs-vben/locales';
+
+import Sortable from 'sortablejs';
+
+import SelectItem from './select-item.vue';
+
+interface Item {
+  key: string;
+  label: string;
+  position: 'auto' | 'fixed' | 'header' | 'none' | 'user-dropdown';
+  /** 每项可选的 position 选项；不传则用 props.positionItems */
+  positionItems?: SelectOption[];
+}
+
+const props = defineProps<{
+  items: Item[];
+  positionItems: SelectOption[];
+}>();
+
+const emit = defineEmits<{
+  updateOrder: [keys: string[]];
+  updatePosition: [
+    key: string,
+    position: 'auto' | 'fixed' | 'header' | 'none' | 'user-dropdown',
+  ];
+}>();
+
+const listRef = ref<HTMLElement>();
+let sortableInstance: null | Sortable = null;
+
+// 划分规则：
+// - hidden：position === 'none'（不显示）
+// - sortable：其它（含 auto/fixed，偏好按钮的智能模式视觉归入顶栏组参与排序，
+//   避免 preferences 从 widget.order 丢失）
+const sortableList = computed(() =>
+  props.items.filter((item) => item.position !== 'none'),
+);
+
+const hiddenList = computed(() =>
+  props.items.filter((item) => item.position === 'none'),
+);
+function initSortable() {
+  const container = listRef.value;
+  if (!container) return;
+  sortableInstance?.destroy();
+  sortableInstance = Sortable.create(container, {
+    animation: 200,
+    handle: '.drag-handle',
+    onEnd() {
+      // Sortable 已经改了 DOM，但 sortableList computed 还是旧顺序。
+      // 直接从 DOM 读 children 的 data-key 拿新顺序，再追加 hidden 部分。
+      const newOrder = [...container.children]
+        .map((el) => (el as HTMLElement).dataset.key)
+        .filter(Boolean) as string[];
+      emit('updateOrder', [...newOrder, ...hiddenList.value.map((i) => i.key)]);
+    },
+  });
+}
+
+onMounted(initSortable);
+onUnmounted(() => {
+  sortableInstance?.destroy();
+  sortableInstance = null;
+});
+
+function setPosition(key: string, value: string | undefined) {
+  if (!value) return;
+  emit(
+    'updatePosition',
+    key,
+    value as 'auto' | 'fixed' | 'header' | 'none' | 'user-dropdown',
+  );
+  nextTick(() => {
+    emit(
+      'updateOrder',
+      [...sortableList.value, ...hiddenList.value].map((i) => i.key),
+    );
+  });
+}
+</script>
+
+<template>
+  <div class="space-y-1">
+    <div ref="listRef" class="space-y-1">
+      <div
+        v-for="item in sortableList"
+        :key="item.key"
+        :data-key="item.key"
+        class="bg-accent flex items-center rounded-md pl-2"
+      >
+        <GripVertical
+          class="drag-handle size-4 shrink-0 cursor-grab text-muted-foreground active:cursor-grabbing"
+        />
+        <SelectItem
+          :items="item.positionItems ?? positionItems"
+          :model-value="item.position"
+          class="min-w-0 flex-1"
+          @update:model-value="
+            (v: string | undefined) => setPosition(item.key, v)
+          "
+        >
+          <span class="truncate">{{ item.label }}</span>
+        </SelectItem>
+      </div>
+    </div>
+    <div v-if="hiddenList.length > 0" class="pt-2">
+      <div class="text-muted-foreground mb-1 text-xs font-medium">
+        {{ $t('preferences.widget.hidden') }}
+      </div>
+      <div
+        v-for="item in hiddenList"
+        :key="item.key"
+        class="flex items-center rounded-md"
+      >
+        <SelectItem
+          :items="item.positionItems ?? positionItems"
+          :model-value="item.position"
+          class="min-w-0 flex-1"
+          @update:model-value="
+            (v: string | undefined) => setPosition(item.key, v)
+          "
+        >
+          <span
+            class="text-muted-foreground truncate line-through decoration-dotted"
+          >
+            {{ item.label }}
+          </span>
+        </SelectItem>
+      </div>
+    </div>
+  </div>
+</template>

package/src/layouts/widgets/preferences/blocks/general/animation.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { $t } from '@melt-js/libs-vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceAnimation',
+});
+
+const transitionProgress = defineModel<boolean>('transitionProgress', {
+  // 默认值
+  default: false,
+});
+const transitionName = defineModel<string | undefined>('transitionName', {
+  default: undefined,
+});
+const transitionEnable = defineModel<boolean>('transitionEnable');
+const transitionLoading = defineModel<boolean>('transitionLoading');
+
+const transitionPreset = ['fade', 'fade-slide', 'fade-up', 'fade-down'];
+
+function handleClick(value: string) {
+  transitionName.value = value;
+}
+</script>
+
+<template>
+  <SwitchItem v-model="transitionProgress">
+    {{ $t('preferences.animation.progress') }}
+  </SwitchItem>
+  <SwitchItem v-model="transitionLoading">
+    {{ $t('preferences.animation.loading') }}
+  </SwitchItem>
+  <SwitchItem v-model="transitionEnable">
+    {{ $t('preferences.animation.transition') }}
+  </SwitchItem>
+  <div
+    v-if="transitionEnable"
+    class="mt-3 mb-2 flex justify-between gap-3 px-2"
+  >
+    <div
+      v-for="item in transitionPreset"
+      :key="item"
+      :class="{
+        'outline-box-active': transitionName === item,
+      }"
+      class="outline-box p-2"
+      @click="handleClick(item)"
+    >
+      <div
+        :class="`${item}-slow`"
+        class="h-10 w-12 rounded-md bg-primary"
+      ></div>
+    </div>
+  </div>
+</template>