Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

packages/effects/common-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/common-ui",
-  "version": "5.4.8",
+  "version": "5.5.0",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -29,6 +29,7 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@vben-core/form-ui": "workspace:*",
     "@vben-core/popup-ui": "workspace:*",
+    "@vben-core/preferences": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/shared": "workspace:*",
     "@vben/constants": "workspace:*",

packages/effects/common-ui/src/components/api-select/api-select.vue

@@ -0,0 +1,182 @@
+<script lang="ts" setup>
+import type { AnyPromiseFunction } from '@vben/types';
+
+import { computed, ref, unref, useAttrs, type VNode, watch } from 'vue';
+
+import { LoaderCircle } from '@vben/icons';
+import { get, isEqual, isFunction } from '@vben-core/shared/utils';
+
+import { objectOmit } from '@vueuse/core';
+
+type OptionsItem = {
+  [name: string]: any;
+  disabled?: boolean;
+  label?: string;
+  value?: string;
+};
+
+interface Props {
+  // 组件
+  component: VNode;
+  numberToString?: boolean;
+  api?: (arg?: any) => Promise<OptionsItem[] | Record<string, any>>;
+  params?: Record<string, any>;
+  resultField?: string;
+  labelField?: string;
+  valueField?: string;
+  immediate?: boolean;
+  alwaysLoad?: boolean;
+  beforeFetch?: AnyPromiseFunction<any, any>;
+  afterFetch?: AnyPromiseFunction<any, any>;
+  options?: OptionsItem[];
+  // 尾部插槽
+  loadingSlot?: string;
+  // 可见时触发的事件名
+  visibleEvent?: string;
+  modelField?: string;
+}
+
+defineOptions({ name: 'ApiSelect', inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  labelField: 'label',
+  valueField: 'value',
+  resultField: '',
+  visibleEvent: '',
+  numberToString: false,
+  params: () => ({}),
+  immediate: true,
+  alwaysLoad: false,
+  loadingSlot: '',
+  beforeFetch: undefined,
+  afterFetch: undefined,
+  modelField: 'modelValue',
+  api: undefined,
+  options: () => [],
+});
+
+const emit = defineEmits<{
+  optionsChange: [OptionsItem[]];
+}>();
+
+const modelValue = defineModel({ default: '' });
+
+const attrs = useAttrs();
+
+const refOptions = ref<OptionsItem[]>([]);
+const loading = ref(false);
+// 首次是否加载过了
+const isFirstLoaded = ref(false);
+
+const getOptions = computed(() => {
+  const { labelField, valueField, numberToString } = props;
+
+  const data: OptionsItem[] = [];
+  const refOptionsData = unref(refOptions);
+
+  for (const next of refOptionsData) {
+    if (next) {
+      const value = get(next, valueField);
+      data.push({
+        ...objectOmit(next, [labelField, valueField]),
+        label: get(next, labelField),
+        value: numberToString ? `${value}` : value,
+      });
+    }
+  }
+
+  return data.length > 0 ? data : props.options;
+});
+
+const bindProps = computed(() => {
+  return {
+    [props.modelField]: unref(modelValue),
+    [`onUpdate:${props.modelField}`]: (val: string) => {
+      modelValue.value = val;
+    },
+    ...objectOmit(attrs, ['onUpdate:value']),
+    ...(props.visibleEvent
+      ? {
+          [props.visibleEvent]: handleFetchForVisible,
+        }
+      : {}),
+  };
+});
+
+async function fetchApi() {
+  let { api, beforeFetch, afterFetch, params, resultField } = props;
+
+  if (!api || !isFunction(api) || loading.value) {
+    return;
+  }
+  refOptions.value = [];
+  try {
+    loading.value = true;
+    if (beforeFetch && isFunction(beforeFetch)) {
+      params = (await beforeFetch(params)) || params;
+    }
+    let res = await api(params);
+    if (afterFetch && isFunction(afterFetch)) {
+      res = (await afterFetch(res)) || res;
+    }
+    isFirstLoaded.value = true;
+    if (Array.isArray(res)) {
+      refOptions.value = res;
+      emitChange();
+      return;
+    }
+    if (resultField) {
+      refOptions.value = get(res, resultField) || [];
+    }
+    emitChange();
+  } catch (error) {
+    console.warn(error);
+    // reset status
+    isFirstLoaded.value = false;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function handleFetchForVisible(visible: boolean) {
+  if (visible) {
+    if (props.alwaysLoad) {
+      await fetchApi();
+    } else if (!props.immediate && !unref(isFirstLoaded)) {
+      await fetchApi();
+    }
+  }
+}
+
+watch(
+  () => props.params,
+  (value, oldValue) => {
+    if (isEqual(value, oldValue)) {
+      return;
+    }
+    fetchApi();
+  },
+  { deep: true, immediate: props.immediate },
+);
+
+function emitChange() {
+  emit('optionsChange', unref(getOptions));
+}
+</script>
+<template>
+  <div v-bind="{ ...$attrs }">
+    <component
+      :is="component"
+      v-bind="bindProps"
+      :options="getOptions"
+      :placeholder="$attrs.placeholder"
+    >
+      <template v-for="item in Object.keys($slots)" #[item]="data">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+      <template v-if="loadingSlot && loading" #[loadingSlot]>
+        <LoaderCircle class="animate-spin" />
+      </template>
+    </component>
+  </div>
+</template>

packages/effects/common-ui/src/components/api-select/index.ts

@@ -0,0 +1 @@
+export { default as ApiSelect } from './api-select.vue';

packages/effects/common-ui/src/components/icon-picker/icon-picker.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { ref, useTemplateRef, watch, watchEffect } from 'vue';
+import { computed, ref, watch, watchEffect } from 'vue';
 
 import { usePagination } from '@vben/hooks';
-import { EmptyIcon, Grip } from '@vben/icons';
+import { EmptyIcon, Grip, listIcons } from '@vben/icons';
+import { $t } from '@vben/locales';
 import {
   Button,
+  Input,
   Pagination,
   PaginationEllipsis,
   PaginationFirst,
@@ -18,9 +20,11 @@ import {
   VbenPopover,
 } from '@vben-core/shadcn-ui';
 
+import { refDebounced } from '@vueuse/core';
+
 interface Props {
-  value?: string;
   pageSize?: number;
+  prefix?: string;
   /**
    * 图标列表
    */
@@ -28,48 +32,65 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  value: '',
+  prefix: 'ant-design',
   pageSize: 36,
   icons: () => [],
 });
 
 const emit = defineEmits<{
   change: [string];
-  'update:value': [string];
 }>();
 
-const refTrigger = useTemplateRef<HTMLElement>('refTrigger');
-const currentSelect = ref('');
-const currentList = ref(props.icons);
-const currentPage = ref(1);
+const modelValue = defineModel({ default: '', type: String });
 
-watch(
-  () => props.icons,
-  (newIcons) => {
-    currentList.value = newIcons;
-  },
-  { immediate: true },
-);
+const visible = ref(false);
+const currentSelect = ref('');
+const currentPage = ref(1);
+const keyword = ref('');
+const keywordDebounce = refDebounced(keyword, 300);
+const currentList = computed(() => {
+  try {
+    if (props.prefix) {
+      const icons = listIcons('', props.prefix);
+      if (icons.length === 0) {
+        console.warn(`No icons found for prefix: ${props.prefix}`);
+      }
+      return icons;
+    } else {
+      return props.icons;
+    }
+  } catch (error) {
+    console.error('Failed to load icons:', error);
+    return [];
+  }
+});
+
+const showList = computed(() => {
+  return currentList.value.filter((item) =>
+    item.includes(keywordDebounce.value),
+  );
+});
 
 const { paginationList, total, setCurrentPage } = usePagination(
-  currentList,
+  showList,
   props.pageSize,
 );
 
 watchEffect(() => {
-  currentSelect.value = props.value;
+  currentSelect.value = modelValue.value;
 });
 
 watch(
   () => currentSelect.value,
   (v) => {
-    emit('update:value', v);
     emit('change', v);
   },
 );
 
 const handleClick = (icon: string) => {
   currentSelect.value = icon;
+  modelValue.value = icon;
+  close();
 };
 
 const handlePageChange = (page: number) => {
@@ -77,22 +98,46 @@ const handlePageChange = (page: number) => {
   setCurrentPage(page);
 };
 
-function changeOpenState() {
-  refTrigger.value?.click?.();
+function toggleOpenState() {
+  visible.value = !visible.value;
 }
 
-defineExpose({ changeOpenState });
+function open() {
+  visible.value = true;
+}
+
+function close() {
+  visible.value = false;
+}
+
+defineExpose({ toggleOpenState, open, close });
 </script>
 <template>
   <VbenPopover
+    v-model:open="visible"
     :content-props="{ align: 'end', alignOffset: -11, sideOffset: 8 }"
     content-class="p-0 pt-3"
   >
     <template #trigger>
-      <div ref="refTrigger">
-        <VbenIcon :icon="currentSelect || Grip" class="size-5" />
-      </div>
+      <slot :close="close" :icon="currentSelect" :open="open" name="trigger">
+        <div class="flex items-center gap-2">
+          <Input
+            :value="currentSelect"
+            class="flex-1 cursor-pointer"
+            v-bind="$attrs"
+            :placeholder="$t('ui.iconPicker.placeholder')"
+          />
+          <VbenIcon :icon="currentSelect || Grip" class="size-8" />
+        </div>
+      </slot>
     </template>
+    <div class="mb-2 flex w-full">
+      <Input
+        v-model="keyword"
+        :placeholder="$t('ui.iconPicker.search')"
+        class="mx-2"
+      />
+    </div>
 
     <template v-if="paginationList.length > 0">
       <div class="grid max-h-[360px] w-full grid-cols-6 justify-items-center">

packages/effects/common-ui/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './api-select';
 export * from './captcha';
 export * from './code-mirror';
 export * from './ellipsis-text';

packages/effects/common-ui/src/components/page/page.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
+import {
+  computed,
+  nextTick,
+  onMounted,
+  ref,
+  type StyleValue,
+  useTemplateRef,
+} from 'vue';
+
+import { preferences } from '@vben-core/preferences';
+import { cn } from '@vben-core/shared/utils';
 
 interface Props {
   title?: string;
@@ -9,6 +19,10 @@ interface Props {
    * 根据content可见高度自适应
    */
   autoContentHeight?: boolean;
+  /** 头部固定 */
+  fixedHeader?: boolean;
+  headerClass?: string;
+  footerClass?: string;
 }
 
 defineOptions({
@@ -20,6 +34,7 @@ const {
   description = '',
   autoContentHeight = false,
   title = '',
+  fixedHeader = false,
 } = defineProps<Props>();
 
 const headerHeight = ref(0);
@@ -29,6 +44,17 @@ const shouldAutoHeight = ref(false);
 const headerRef = useTemplateRef<HTMLDivElement>('headerRef');
 const footerRef = useTemplateRef<HTMLDivElement>('footerRef');
 
+const headerStyle = computed<StyleValue>(() => {
+  return fixedHeader
+    ? {
+        position: 'sticky',
+        zIndex: 200,
+        top:
+          preferences.header.mode === 'fixed' ? 'var(--vben-header-height)' : 0,
+      }
+    : undefined;
+});
+
 const contentStyle = computed(() => {
   if (autoContentHeight) {
     return {
@@ -69,7 +95,16 @@ onMounted(() => {
         $slots.extra
       "
       ref="headerRef"
-      class="bg-card relative px-6 py-4"
+      :class="
+        cn(
+          'bg-card relative px-6 py-4',
+          headerClass,
+          fixedHeader
+            ? 'border-border border-b transition-all duration-200'
+            : '',
+        )
+      "
+      :style="headerStyle"
     >
       <slot name="title">
         <div v-if="title" class="mb-2 flex text-lg font-semibold">
@@ -95,7 +130,12 @@ onMounted(() => {
     <div
       v-if="$slots.footer"
       ref="footerRef"
-      class="bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4"
+      :class="
+        cn(
+          footerClass,
+          'bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4',
+        )
+      "
     >
       <slot name="footer"></slot>
     </div>