Merge branch 'main' into main

2025-12-30 10:32:25 +00:00 · 2025-11-12 04:27:57 +08:00
parent 05e9d65251 d811af37dd
commit f59e33682c
62 changed files with 1809 additions and 25 deletions
--- a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
+++ b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -47,7 +47,7 @@ async function handleSubmit(e: Event) {
    return;
  }

-  const values = toRaw(await props.formApi.getValues());
+  const values = toRaw(await props.formApi.getValues()) ?? {};
  await props.handleSubmit?.(values);
 }

@@ -56,7 +56,7 @@ async function handleReset(e: Event) {
  e?.stopPropagation();
  const props = unref(rootProps);

-  const values = toRaw(await props.formApi?.getValues());
+  const values = toRaw(await props.formApi?.getValues()) ?? {};

  if (isFunction(props.handleReset)) {
    await props.handleReset?.(values);
--- a/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -36,6 +36,7 @@ function getDefaultState(): VbenFormProps {
    handleReset: undefined,
    handleSubmit: undefined,
    handleValuesChange: undefined,
+    handleCollapsedChange: undefined,
    layout: 'horizontal',
    resetButtonOptions: {},
    schema: [],
--- a/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -379,6 +379,10 @@ export interface VbenFormProps<
   * 表单字段映射
   */
  fieldMappingTime?: FieldMappingTime;
+  /**
+   * 表单收起展开状态变化回调
+   */
+  handleCollapsedChange?: (collapsed: boolean) => void;
  /**
   * 表单重置回调
   */
--- a/packages/@core/ui-kit/form-ui/src/use-form-context.ts
+++ b/packages/@core/ui-kit/form-ui/src/use-form-context.ts
@@ -13,7 +13,7 @@ import { useForm } from 'vee-validate';
 import { object, ZodIntersection, ZodNumber, ZodObject, ZodString } from 'zod';
 import { getDefaultsForSchema } from 'zod-defaults';

-type ExtendFormProps = VbenFormProps & { formApi: ExtendedFormApi };
+type ExtendFormProps = VbenFormProps & { formApi?: ExtendedFormApi };

 export const [injectFormProps, provideFormProps] =
  createContext<[ComputedRef<ExtendFormProps> | ExtendFormProps, FormActions]>(
--- a/packages/@core/ui-kit/form-ui/src/vben-form.vue
+++ b/packages/@core/ui-kit/form-ui/src/vben-form.vue
@@ -40,7 +40,9 @@ const { delegatedSlots, form } = useFormInitial(props);
 provideFormProps([props, form]);

 const handleUpdateCollapsed = (value: boolean) => {
-  currentCollapsed.value = !!value;
+  currentCollapsed.value = value;
+  // 触发收起展开状态变化回调
+  props.handleCollapsedChange?.(value);
 };

 watchEffect(() => {
--- a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
+++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@@ -25,7 +25,7 @@ import {
 } from './use-form-context';
 // 通过 extends 会导致热更新卡死，所以重复写了一遍
 interface Props extends VbenFormProps {
-  formApi: ExtendedFormApi;
+  formApi?: ExtendedFormApi;
 }

 const props = defineProps<Props>();
@@ -44,11 +44,13 @@ provideComponentRefMap(componentRefMap);
 props.formApi?.mount?.(form, componentRefMap);

 const handleUpdateCollapsed = (value: boolean) => {
-  props.formApi?.setState({ collapsed: !!value });
+  props.formApi?.setState({ collapsed: value });
+  // 触发收起展开状态变化回调
+  forward.value.handleCollapsedChange?.(value);
 };

 function handleKeyDownEnter(event: KeyboardEvent) {
-  if (!state.value.submitOnEnter || !forward.value.formApi?.isMounted) {
+  if (!state?.value.submitOnEnter || !forward.value.formApi?.isMounted) {
    return;
  }
  // 如果是 textarea 不阻止默认行为，否则会导致无法换行。
@@ -58,11 +60,11 @@ function handleKeyDownEnter(event: KeyboardEvent) {
  }
  event.preventDefault();

-  forward.value.formApi.validateAndSubmitForm();
+  forward.value.formApi?.validateAndSubmitForm();
 }

 const handleValuesChangeDebounced = useDebounceFn(async () => {
-  state.value.submitOnChange && forward.value.formApi?.validateAndSubmitForm();
+  state?.value.submitOnChange && forward.value.formApi?.validateAndSubmitForm();
 }, 300);

 const valuesCache: Recordable<any> = {};
@@ -74,7 +76,7 @@ onMounted(async () => {
    () => form.values,
    async (newVal) => {
      if (forward.value.handleValuesChange) {
-        const fields = state.value.schema?.map((item) => {
+        const fields = state?.value.schema?.map((item) => {
          return item.fieldName;
        });

@@ -91,8 +93,9 @@ onMounted(async () => {

          if (changedFields.length > 0) {
            // 调用handleValuesChange回调，传入所有表单值的深拷贝和变更的字段列表
+            const values = await forward.value.formApi?.getValues();
            forward.value.handleValuesChange(
-              cloneDeep(await forward.value.formApi.getValues()),
+              cloneDeep(values ?? {}) as Record<string, any>,
              changedFields,
            );
          }
@@ -109,7 +112,7 @@ onMounted(async () => {
  <Form
    @keydown.enter="handleKeyDownEnter"
    v-bind="forward"
-    :collapsed="state.collapsed"
+    :collapsed="state?.collapsed"
    :component-bind-event-map="COMPONENT_BIND_EVENT_MAP"
    :component-map="COMPONENT_MAP"
    :form="form"
@@ -126,7 +129,7 @@ onMounted(async () => {
      <slot v-bind="slotProps">
        <FormActions
          v-if="forward.showDefaultActions"
-          :model-value="state.collapsed"
+          :model-value="state?.collapsed"
          @update:model-value="handleUpdateCollapsed"
        >
          <template #reset-before="resetSlotProps">
--- a/packages/effects/common-ui/src/ui/index.ts
+++ b/packages/effects/common-ui/src/ui/index.ts
@@ -2,3 +2,4 @@ export * from './about';
 export * from './authentication';
 export * from './dashboard';
 export * from './fallback';
+export * from './profile';
--- a/packages/effects/common-ui/src/ui/profile/base-setting.vue
+++ b/packages/effects/common-ui/src/ui/profile/base-setting.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
+import { computed, reactive } from 'vue';
+
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+interface Props {
+  formSchema?: VbenFormSchema[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  formSchema: () => [],
+});
+
+const emit = defineEmits<{
+  submit: [Recordable<any>];
+}>();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      // 所有表单项
+      componentProps: {
+        class: 'w-full',
+      },
+    },
+    layout: 'horizontal',
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    emit('submit', values);
+  }
+}
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+<template>
+  <div @keydown.enter.prevent="handleSubmit">
+    <Form />
+    <VbenButton type="submit" class="mt-4" @click="handleSubmit">
+      更新基本信息
+    </VbenButton>
+  </div>
+</template>
--- a/packages/effects/common-ui/src/ui/profile/index.ts
+++ b/packages/effects/common-ui/src/ui/profile/index.ts
@@ -0,0 +1,6 @@
+export { default as ProfileBaseSetting } from './base-setting.vue';
+export { default as ProfileNotificationSetting } from './notification-setting.vue';
+export { default as ProfilePasswordSetting } from './password-setting.vue';
+export { default as Profile } from './profile.vue';
+export { default as ProfileSecuritySetting } from './security-setting.vue';
+export type * from './types';
--- a/packages/effects/common-ui/src/ui/profile/notification-setting.vue
+++ b/packages/effects/common-ui/src/ui/profile/notification-setting.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { SettingProps } from './types';
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  Switch,
+} from '@vben-core/shadcn-ui';
+
+withDefaults(defineProps<SettingProps>(), {
+  formSchema: () => [],
+});
+
+const emit = defineEmits<{
+  change: [Recordable<any>];
+}>();
+
+function handleChange(fieldName: string, value: boolean) {
+  emit('change', { fieldName, value });
+}
+</script>
+<template>
+  <Form class="space-y-8">
+    <div class="space-y-4">
+      <template v-for="item in formSchema" :key="item.fieldName">
+        <FormField type="checkbox" :name="item.fieldName">
+          <FormItem
+            class="flex flex-row items-center justify-between rounded-lg border p-4"
+          >
+            <div class="space-y-0.5">
+              <FormLabel class="text-base"> {{ item.label }} </FormLabel>
+              <FormDescription>
+                {{ item.description }}
+              </FormDescription>
+            </div>
+            <FormControl>
+              <Switch
+                :model-value="item.value"
+                @update:model-value="handleChange(item.fieldName, $event)"
+              />
+            </FormControl>
+          </FormItem>
+        </FormField>
+      </template>
+    </div>
+  </Form>
+</template>
--- a/packages/effects/common-ui/src/ui/profile/password-setting.vue
+++ b/packages/effects/common-ui/src/ui/profile/password-setting.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
+import { computed, reactive } from 'vue';
+
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+interface Props {
+  formSchema?: VbenFormSchema[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  formSchema: () => [],
+});
+
+const emit = defineEmits<{
+  submit: [Recordable<any>];
+}>();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      // 所有表单项
+      componentProps: {
+        class: 'w-full',
+      },
+    },
+    layout: 'horizontal',
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    emit('submit', values);
+  }
+}
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+<template>
+  <div>
+    <Form />
+    <VbenButton type="submit" class="mt-4" @click="handleSubmit">
+      更新密码
+    </VbenButton>
+  </div>
+</template>
--- a/packages/effects/common-ui/src/ui/profile/profile.vue
+++ b/packages/effects/common-ui/src/ui/profile/profile.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { Props } from './types';
+
+import { preferences } from '@vben-core/preferences';
+import {
+  Card,
+  Separator,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  VbenAvatar,
+} from '@vben-core/shadcn-ui';
+
+import { Page } from '../../components';
+
+defineOptions({
+  name: 'ProfileUI',
+});
+
+withDefaults(defineProps<Props>(), {
+  title: '关于项目',
+  tabs: () => [],
+});
+
+const tabsValue = defineModel<string>('modelValue');
+</script>
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full w-full">
+      <Card class="w-1/6 flex-none">
+        <div class="mt-4 flex h-40 flex-col items-center justify-center gap-4">
+          <VbenAvatar
+            :src="userInfo?.avatar ?? preferences.app.defaultAvatar"
+            class="size-20"
+          />
+          <span class="text-lg font-semibold">
+            {{ userInfo?.realName ?? '' }}
+          </span>
+          <span class="text-foreground/80 text-sm">
+            {{ userInfo?.username ?? '' }}
+          </span>
+        </div>
+        <Separator class="my-4" />
+        <Tabs v-model="tabsValue" orientation="vertical" class="m-4">
+          <TabsList class="bg-card grid w-full grid-cols-1">
+            <TabsTrigger
+              v-for="tab in tabs"
+              :key="tab.value"
+              :value="tab.value"
+              class="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground h-12 justify-start"
+            >
+              {{ tab.label }}
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </Card>
+      <Card class="ml-4 w-5/6 flex-auto p-8">
+        <slot name="content"></slot>
+      </Card>
+    </div>
+  </Page>
+</template>
--- a/packages/effects/common-ui/src/ui/profile/security-setting.vue
+++ b/packages/effects/common-ui/src/ui/profile/security-setting.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { SettingProps } from './types';
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  Switch,
+} from '@vben-core/shadcn-ui';
+
+withDefaults(defineProps<SettingProps>(), {
+  formSchema: () => [],
+});
+
+const emit = defineEmits<{
+  change: [Recordable<any>];
+}>();
+
+function handleChange(fieldName: string, value: boolean) {
+  emit('change', { fieldName, value });
+}
+</script>
+<template>
+  <Form class="space-y-8">
+    <div class="space-y-4">
+      <template v-for="item in formSchema" :key="item.fieldName">
+        <FormField type="checkbox" :name="item.fieldName">
+          <FormItem
+            class="flex flex-row items-center justify-between rounded-lg border p-4"
+          >
+            <div class="space-y-0.5">
+              <FormLabel class="text-base"> {{ item.label }} </FormLabel>
+              <FormDescription>
+                {{ item.description }}
+              </FormDescription>
+            </div>
+            <FormControl>
+              <Switch
+                :model-value="item.value"
+                @update:model-value="handleChange(item.fieldName, $event)"
+              />
+            </FormControl>
+          </FormItem>
+        </FormField>
+      </template>
+    </div>
+  </Form>
+</template>
--- a/packages/effects/common-ui/src/ui/profile/types.ts
+++ b/packages/effects/common-ui/src/ui/profile/types.ts
@@ -0,0 +1,21 @@
+import type { BasicUserInfo } from '@vben/types';
+
+export interface Props {
+  title?: string;
+  userInfo: BasicUserInfo | null;
+  tabs: {
+    label: string;
+    value: string;
+  }[];
+}
+
+export interface FormSchemaItem {
+  description: string;
+  fieldName: string;
+  label: string;
+  value: boolean;
+}
+
+export interface SettingProps {
+  formSchema: FormSchemaItem[];
+}
--- a/packages/effects/request/src/request-client/modules/downloader.test.ts
+++ b/packages/effects/request/src/request-client/modules/downloader.test.ts
@@ -30,6 +30,7 @@ describe('fileDownloader', () => {
    expect(result).toBeInstanceOf(Blob);
    expect(result).toEqual(mockBlob);
    expect(mockAxiosInstance.get).toHaveBeenCalledWith(url, {
+      method: 'GET',
      responseType: 'blob',
      responseReturn: 'body',
    });
@@ -51,6 +52,7 @@ describe('fileDownloader', () => {
    expect(result).toEqual(mockBlob);
    expect(mockAxiosInstance.get).toHaveBeenCalledWith(url, {
      ...customConfig,
+      method: 'GET',
      responseType: 'blob',
      responseReturn: 'body',
    });
@@ -84,3 +86,72 @@ describe('fileDownloader', () => {
    );
  });
 });
+
+describe('fileDownloader use other method', () => {
+  let fileDownloader: FileDownloader;
+
+  it('should call request using get', async () => {
+    const url = 'https://example.com/file';
+    const mockBlob = new Blob(['file content'], { type: 'text/plain' });
+    const mockResponse: Blob = mockBlob;
+
+    const mockAxiosInstance = {
+      request: vi.fn(),
+    } as any;
+
+    fileDownloader = new FileDownloader(mockAxiosInstance);
+
+    mockAxiosInstance.request.mockResolvedValueOnce(mockResponse);
+
+    const result = await fileDownloader.download(url);
+
+    expect(result).toBeInstanceOf(Blob);
+    expect(result).toEqual(mockBlob);
+    expect(mockAxiosInstance.request).toHaveBeenCalledWith(url, {
+      method: 'GET',
+      responseType: 'blob',
+      responseReturn: 'body',
+    });
+  });
+
+  it('should call post', async () => {
+    const url = 'https://example.com/file';
+
+    const mockAxiosInstance = {
+      post: vi.fn(),
+    } as any;
+
+    fileDownloader = new FileDownloader(mockAxiosInstance);
+
+    const customConfig: AxiosRequestConfig = {
+      method: 'POST',
+      data: { name: 'aa' },
+    };
+
+    await fileDownloader.download(url, customConfig);
+
+    expect(mockAxiosInstance.post).toHaveBeenCalledWith(
+      url,
+      { name: 'aa' },
+      {
+        method: 'POST',
+        responseType: 'blob',
+        responseReturn: 'body',
+      },
+    );
+  });
+
+  it('should handle errors gracefully', async () => {
+    const url = 'https://example.com/file';
+    const mockAxiosInstance = {
+      post: vi.fn(),
+    } as any;
+
+    fileDownloader = new FileDownloader(mockAxiosInstance);
+    await expect(() =>
+      fileDownloader.download(url, { method: 'postt' }),
+    ).rejects.toThrow(
+      'RequestClient does not support method "POSTT". Please ensure the method is properly implemented in your RequestClient instance.',
+    );
+  });
+});
--- a/packages/effects/request/src/request-client/modules/downloader.ts
+++ b/packages/effects/request/src/request-client/modules/downloader.ts
@@ -28,13 +28,32 @@ class FileDownloader {
  ): Promise<T> {
    const finalConfig: DownloadRequestConfig = {
      responseReturn: 'body',
+      method: 'GET',
      ...config,
      responseType: 'blob',
    };

-    const response = await this.client.get<T>(url, finalConfig);
+    // Prefer a generic request if available; otherwise, dispatch to method-specific calls.
+    const method = (finalConfig.method || 'GET').toUpperCase();
+    const clientAny = this.client as any;

-    return response;
+    if (typeof clientAny.request === 'function') {
+      return await clientAny.request(url, finalConfig);
+    }
+    const lower = method.toLowerCase();
+
+    if (typeof clientAny[lower] === 'function') {
+      if (['POST', 'PUT'].includes(method)) {
+        const { data, ...rest } = finalConfig as Record<string, any>;
+        return await clientAny[lower](url, data, rest);
+      }
+
+      return await clientAny[lower](url, finalConfig);
+    }
+
+    throw new Error(
+      `RequestClient does not support method "${method}". Please ensure the method is properly implemented in your RequestClient instance.`,
+    );
  }
 }