🔱: [client] sync upgrade with 7 commits [trident-sync]

chore: Merge branch 'vben' # Conflicts: # package.json perf: antdv示例改成使用vben框架 chore: vben chore: vben chore: vben
2026-06-26 21:43:27 +08:00 · 2025-03-03 19:24:51 +00:00
parent de26ee9383
commit 335d175d57
649 changed files with 36984 additions and 826 deletions
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed, toRaw, unref, watch } from "vue";
+
+import { useSimpleLocale } from "../../composables";
+import { VbenExpandableArrow } from "../../shadcn-ui";
+import { cn, isFunction, triggerWindowResize } from "../../shared/utils";
+
+import { COMPONENT_MAP } from "../config";
+import { injectFormProps } from "../use-form-context";
+
+const { $t } = useSimpleLocale();
+
+const [rootProps, form] = injectFormProps();
+
+const collapsed = defineModel({ default: false });
+
+const resetButtonOptions = computed(() => {
+  return {
+    content: `${$t.value("reset")}`,
+    show: true,
+    ...unref(rootProps).resetButtonOptions
+  };
+});
+
+const submitButtonOptions = computed(() => {
+  return {
+    content: `${$t.value("submit")}`,
+    show: true,
+    ...unref(rootProps).submitButtonOptions
+  };
+});
+
+// const isQueryForm = computed(() => {
+//   return !!unref(rootProps).showCollapseButton;
+// });
+
+const queryFormStyle = computed(() => {
+  if (!unref(rootProps).actionWrapperClass) {
+    return {
+      "grid-column": `-2 / -1`,
+      marginLeft: "auto"
+    };
+  }
+
+  return {};
+});
+
+async function handleSubmit(e: Event) {
+  e?.preventDefault();
+  e?.stopPropagation();
+  const { valid } = await form.validate();
+  if (!valid) {
+    return;
+  }
+
+  const values = toRaw(await unref(rootProps).formApi?.getValues());
+  await unref(rootProps).handleSubmit?.(values);
+}
+
+async function handleReset(e: Event) {
+  e?.preventDefault();
+  e?.stopPropagation();
+  const props = unref(rootProps);
+
+  const values = toRaw(props.formApi?.getValues());
+
+  if (isFunction(props.handleReset)) {
+    await props.handleReset?.(values);
+  } else {
+    form.resetForm();
+  }
+}
+
+watch(
+  () => collapsed.value,
+  () => {
+    const props = unref(rootProps);
+    if (props.collapseTriggerResize) {
+      triggerWindowResize();
+    }
+  }
+);
+
+defineExpose({
+  handleReset,
+  handleSubmit
+});
+</script>
+<template>
+  <div :class="cn('col-span-full w-full text-right', rootProps.compact ? 'pb-2' : 'pb-6', rootProps.actionWrapperClass)" :style="queryFormStyle">
+    <template v-if="rootProps.actionButtonsReverse">
+      <!-- 提交按钮前 -->
+      <slot name="submit-before"></slot>
+
+      <component :is="COMPONENT_MAP.PrimaryButton" v-if="submitButtonOptions.show" class="ml-3" type="button" v-bind="submitButtonOptions" @click="handleSubmit">
+        {{ submitButtonOptions.content }}
+      </component>
+    </template>
+
+    <!-- 重置按钮前 -->
+    <slot name="reset-before"></slot>
+
+    <component :is="COMPONENT_MAP.DefaultButton" v-if="resetButtonOptions.show" class="ml-3" type="button" v-bind="resetButtonOptions" @click="handleReset">
+      {{ resetButtonOptions.content }}
+    </component>
+
+    <template v-if="!rootProps.actionButtonsReverse">
+      <!-- 提交按钮前 -->
+      <slot name="submit-before"></slot>
+
+      <component :is="COMPONENT_MAP.PrimaryButton" v-if="submitButtonOptions.show" class="ml-3" type="button" v-bind="submitButtonOptions" @click="handleSubmit">
+        {{ submitButtonOptions.content }}
+      </component>
+    </template>
+
+    <!-- 展开按钮前 -->
+    <slot name="expand-before"></slot>
+
+    <VbenExpandableArrow v-if="rootProps.showCollapseButton" v-model:model-value="collapsed" class="ml-2">
+      <span>{{ collapsed ? $t("expand") : $t("collapse") }}</span>
+    </VbenExpandableArrow>
+
+    <!-- 展开按钮后 -->
+    <slot name="expand-after"></slot>
+  </div>
+</template>