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

2024-12-08 11:04:04 +08:00
parent 0efbf57152 373766691f
commit 359d837dee
21 changed files with 204 additions and 129 deletions
--- a/packages/@core/base/shared/src/utils/date.ts
+++ b/packages/@core/base/shared/src/utils/date.ts
@@ -16,3 +16,11 @@ export function formatDate(time: number | string, format = 'YYYY-MM-DD') {
 export function formatDateTime(time: number | string) {
  return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
 }
+
+export function isDate(value: any): value is Date {
+  return value instanceof Date;
+}
+
+export function isDayjsObject(value: any): value is dayjs.Dayjs {
+  return dayjs.isDayjs(value);
+}
--- a/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -14,6 +14,8 @@ import { Store } from '@vben-core/shared/store';
 import {
  bindMethods,
  createMerge,
+  isDate,
+  isDayjsObject,
  isFunction,
  isObject,
  mergeWithArrayOverride,
@@ -36,6 +38,7 @@ function getDefaultState(): VbenFormProps {
    showCollapseButton: false,
    showDefaultActions: true,
    submitButtonOptions: {},
+    submitOnChange: false,
    submitOnEnter: false,
    wrapperClass: 'grid-cols-1',
  };
@@ -251,10 +254,19 @@ export class FormApi {
      return;
    }

+    /**
+     * 合并算法有待改进，目前的算法不支持object类型的值。
+     * antd的日期时间相关组件的值类型为dayjs对象
+     * element-plus的日期时间相关组件的值类型可能为Date对象
+     * 以上两种类型需要排除深度合并
+     */
    const fieldMergeFn = createMerge((obj, key, value) => {
      if (key in obj) {
        obj[key] =
-          !Array.isArray(obj[key]) && isObject(obj[key])
+          !Array.isArray(obj[key]) &&
+          isObject(obj[key]) &&
+          !isDayjsObject(obj[key]) &&
+          !isDate(obj[key])
            ? fieldMergeFn(obj[key], value)
            : value;
      }
--- a/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -342,6 +342,12 @@ export interface VbenFormProps<
   */
  submitButtonOptions?: ActionButtonOptions;

+  /**
+   * 是否在字段值改变时提交表单
+   * @default false
+   */
+  submitOnChange?: boolean;
+
  /**
   * 是否在回车时提交表单
   * @default false
--- a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
+++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@@ -6,7 +6,9 @@ import type { ExtendedFormApi, VbenFormProps } from './types';
 import { useForwardPriorityValues } from '@vben-core/composables';
 // import { isFunction } from '@vben-core/shared/utils';

-import { useTemplateRef } from 'vue';
+import { toRaw, useTemplateRef, watch } from 'vue';
+
+import { useDebounceFn } from '@vueuse/core';

 import FormActions from './components/form-actions.vue';
 import {
@@ -56,6 +58,17 @@ function handleKeyDownEnter(event: KeyboardEvent) {

  formActionsRef.value?.handleSubmit?.();
 }
+
+watch(
+  () => form.values,
+  useDebounceFn(() => {
+    (props.handleValuesChange ?? state.value.handleValuesChange)?.(
+      toRaw(form.values),
+    );
+    state.value.submitOnChange && props.formApi?.submitForm();
+  }, 300),
+  { deep: true },
+);
 </script>

 <template>
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -172,7 +172,7 @@ function handleFocusOutside(e: Event) {
      ref="contentRef"
      :class="
        cn(
-          'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0 sm:rounded-2xl',
+          'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0 sm:rounded-[var(--radius)]',
          modalClass,
          {
            'border-border border': bordered,
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogFooter.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogFooter.vue
@@ -7,10 +7,7 @@ const props = defineProps<{ class?: any }>();
 <template>
  <div
    :class="
-      cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
+      cn('flex flex-row flex-col-reverse justify-end gap-x-2', props.class)
    "
  >
    <slot></slot>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetFooter.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetFooter.vue
@@ -7,10 +7,7 @@ const props = defineProps<{ class?: any }>();
 <template>
  <div
    :class="
-      cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
+      cn('flex flex-row flex-col-reverse justify-end gap-x-2', props.class)
    "
  >
    <slot></slot>
--- a/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
+++ b/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { computed, ref, watch, watchEffect } from 'vue';
+import { computed, h, ref, type VNode, watch, watchEffect } from 'vue';

 import { usePagination } from '@vben/hooks';
 import { EmptyIcon, Grip, listIcons } from '@vben/icons';
 import { $t } from '@vben/locales';
 import {
  Button,
-  Input,
  Pagination,
  PaginationEllipsis,
  PaginationFirst,
@@ -29,12 +28,24 @@ interface Props {
   * 图标列表
   */
  icons?: string[];
+  /** Input组件 */
+  inputComponent?: VNode;
+  /** 图标插槽名，预览图标将被渲染到此插槽中 */
+  iconSlot?: string;
+  /** input组件的值属性名称 */
+  modelValueProp?: string;
+  /** 图标样式 */
+  iconClass?: string;
 }

 const props = withDefaults(defineProps<Props>(), {
  prefix: 'ant-design',
  pageSize: 36,
  icons: () => [],
+  inputComponent: () => h('div'),
+  iconSlot: 'default',
+  iconClass: 'size-4',
+  modelValueProp: 'value',
 });

 const emit = defineEmits<{
@@ -110,6 +121,19 @@ function close() {
  visible.value = false;
 }

+function onKeywordChange(v: string) {
+  keyword.value = v;
+}
+
+const searchInputProps = computed(() => {
+  return {
+    placeholder: $t('ui.iconPicker.search'),
+    [props.modelValueProp]: keyword.value,
+    [`onUpdate:${props.modelValueProp}`]: onKeywordChange,
+    class: 'mx-2',
+  };
+});
+
 defineExpose({ toggleOpenState, open, close });
 </script>
 <template>
@@ -119,24 +143,18 @@ defineExpose({ toggleOpenState, open, close });
    content-class="p-0 pt-3"
  >
    <template #trigger>
-      <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>
+      <component
+        :is="inputComponent"
+        :[modelValueProp]="currentSelect"
+        :placeholder="$t('ui.iconPicker.placeholder')"
+      >
+        <template #[iconSlot]>
+          <VbenIcon :icon="currentSelect || Grip" class="size-4" />
+        </template>
+      </component>
    </template>
    <div class="mb-2 flex w-full">
-      <Input
-        v-model="keyword"
-        :placeholder="$t('ui.iconPicker.search')"
-        class="mx-2"
-      />
+      <component :is="inputComponent" v-bind="searchInputProps" />
    </div>

    <template v-if="paginationList.length > 0">
--- a/packages/effects/common-ui/src/components/page/page.vue
+++ b/packages/effects/common-ui/src/components/page/page.vue
@@ -1,14 +1,7 @@
 <script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  onMounted,
-  ref,
-  type StyleValue,
-  useTemplateRef,
-} from 'vue';
+import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';

-import { preferences } from '@vben-core/preferences';
+import { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT } from '@vben-core/shared/constants';
 import { cn } from '@vben-core/shared/utils';

 interface Props {
@@ -19,8 +12,6 @@ interface Props {
   * 根据content可见高度自适应
   */
  autoContentHeight?: boolean;
-  /** 头部固定 */
-  fixedHeader?: boolean;
  headerClass?: string;
  footerClass?: string;
 }
@@ -29,13 +20,7 @@ defineOptions({
  name: 'Page',
 });

-const {
-  contentClass = '',
-  description = '',
-  autoContentHeight = false,
-  title = '',
-  fixedHeader = false,
-} = defineProps<Props>();
+const { autoContentHeight = false } = defineProps<Props>();

 const headerHeight = ref(0);
 const footerHeight = ref(0);
@@ -44,22 +29,11 @@ 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 {
      height: shouldAutoHeight.value
-        ? `calc(var(--vben-content-height) - ${headerHeight.value}px - ${footerHeight.value}px)`
+        ? `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px)`
        : '0',
      // 'overflow-y': shouldAutoHeight.value?'auto':'unset',
    };
@@ -97,28 +71,26 @@ onMounted(() => {
      ref="headerRef"
      :class="
        cn(
-          'bg-card relative px-6 py-4',
+          'bg-card border-border relative flex items-end border-b 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">
-          {{ title }}
-        </div>
-      </slot>
+      <div class="flex-auto">
+        <slot name="title">
+          <div v-if="title" class="mb-2 flex text-lg font-semibold">
+            {{ title }}
+          </div>
+        </slot>

-      <slot name="description">
-        <p v-if="description" class="text-muted-foreground">
-          {{ description }}
-        </p>
-      </slot>
+        <slot name="description">
+          <p v-if="description" class="text-muted-foreground">
+            {{ description }}
+          </p>
+        </slot>
+      </div>

-      <div v-if="$slots.extra" class="absolute bottom-4 right-4">
+      <div v-if="$slots.extra">
        <slot name="extra"></slot>
      </div>
    </div>
@@ -132,8 +104,8 @@ onMounted(() => {
      ref="footerRef"
      :class="
        cn(
-          footerClass,
          'bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4',
+          footerClass,
        )
      "
    >