From 3135b28211828e4437de63a860cec35cd2d34d46 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 17 May 2026 23:35:31 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=88=E5=85=A8=E5=B1=80=EF=BC=89?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0=20number-range-input=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/number-range-input/index.ts    | 39 ++++++++++
 .../number-range-input/number-range-input.vue | 73 +++++++++++++++++++
 .../components/number-range-input/index.ts    | 39 ++++++++++
 .../number-range-input/number-range-input.vue | 73 +++++++++++++++++++
 4 files changed, 224 insertions(+)
 create mode 100644 apps/web-antd/src/components/number-range-input/index.ts
 create mode 100644 apps/web-antd/src/components/number-range-input/number-range-input.vue
 create mode 100644 apps/web-ele/src/components/number-range-input/index.ts
 create mode 100644 apps/web-ele/src/components/number-range-input/number-range-input.vue

diff --git a/apps/web-antd/src/components/number-range-input/index.ts b/apps/web-antd/src/components/number-range-input/index.ts
new file mode 100644
index 000000000..f1647e75d
--- /dev/null
+++ b/apps/web-antd/src/components/number-range-input/index.ts
@@ -0,0 +1,39 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { markRaw } from 'vue';
+
+import NumberRangeInput from './number-range-input.vue';
+
+export { default as NumberRangeInput } from './number-range-input.vue';
+
+export type NumberRangeValue = [number | undefined, number | undefined];
+
+function splitNumberRange(minFieldName: string, maxFieldName: string) {
+  return (
+    value: NumberRangeValue | undefined,
+    setValue: (fieldName: string, value: number | undefined) => void,
+  ) => {
+    setValue(minFieldName, value?.[0]);
+    setValue(maxFieldName, value?.[1]);
+    return undefined;
+  };
+}
+
+export function buildNumberRangeSchema(
+  label: string,
+  fieldName: string,
+  minFieldName: string,
+  maxFieldName: string,
+  precision: number,
+): VbenFormSchema {
+  return {
+    component: markRaw(NumberRangeInput),
+    componentProps: {
+      min: 0,
+      precision,
+    },
+    fieldName,
+    label,
+    valueFormat: splitNumberRange(minFieldName, maxFieldName),
+  };
+}
diff --git a/apps/web-antd/src/components/number-range-input/number-range-input.vue b/apps/web-antd/src/components/number-range-input/number-range-input.vue
new file mode 100644
index 000000000..6ee67c046
--- /dev/null
+++ b/apps/web-antd/src/components/number-range-input/number-range-input.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { InputNumber } from 'ant-design-vue';
+
+type NumberRangeValue = [number | undefined, number | undefined];
+
+const props = withDefaults(
+  defineProps<{
+    maxPlaceholder?: string;
+    min?: number;
+    minPlaceholder?: string;
+    precision?: number;
+    value?: NumberRangeValue;
+  }>(),
+  {
+    maxPlaceholder: '最大值',
+    min: undefined,
+    minPlaceholder: '最小值',
+    precision: 2,
+    value: undefined,
+  },
+);
+
+const emit = defineEmits<{
+  'update:value': [value: NumberRangeValue | undefined];
+}>();
+
+function normalizeValue(value: unknown) {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : undefined;
+  }
+  if (typeof value === 'string' && value.trim() !== '') {
+    const numberValue = Number(value);
+    return Number.isFinite(numberValue) ? numberValue : undefined;
+  }
+  return undefined;
+}
+
+function updateValue(index: 0 | 1, value: unknown) {
+  const next: NumberRangeValue = [
+    props.value?.[0] ?? undefined,
+    props.value?.[1] ?? undefined,
+  ];
+  next[index] = normalizeValue(value);
+  emit(
+    'update:value',
+    next[0] === undefined && next[1] === undefined ? undefined : next,
+  );
+}
+</script>
+
+<template>
+  <div class="flex w-full items-center gap-2">
+    <InputNumber
+      :controls="false"
+      :min="min"
+      :placeholder="minPlaceholder"
+      :precision="precision"
+      :value="value?.[0]"
+      class="min-w-0 flex-1"
+      @update:value="updateValue(0, $event)"
+    />
+    <span class="shrink-0 text-muted-foreground">至</span>
+    <InputNumber
+      :controls="false"
+      :min="min"
+      :placeholder="maxPlaceholder"
+      :precision="precision"
+      :value="value?.[1]"
+      class="min-w-0 flex-1"
+      @update:value="updateValue(1, $event)"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/components/number-range-input/index.ts b/apps/web-ele/src/components/number-range-input/index.ts
new file mode 100644
index 000000000..f1647e75d
--- /dev/null
+++ b/apps/web-ele/src/components/number-range-input/index.ts
@@ -0,0 +1,39 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { markRaw } from 'vue';
+
+import NumberRangeInput from './number-range-input.vue';
+
+export { default as NumberRangeInput } from './number-range-input.vue';
+
+export type NumberRangeValue = [number | undefined, number | undefined];
+
+function splitNumberRange(minFieldName: string, maxFieldName: string) {
+  return (
+    value: NumberRangeValue | undefined,
+    setValue: (fieldName: string, value: number | undefined) => void,
+  ) => {
+    setValue(minFieldName, value?.[0]);
+    setValue(maxFieldName, value?.[1]);
+    return undefined;
+  };
+}
+
+export function buildNumberRangeSchema(
+  label: string,
+  fieldName: string,
+  minFieldName: string,
+  maxFieldName: string,
+  precision: number,
+): VbenFormSchema {
+  return {
+    component: markRaw(NumberRangeInput),
+    componentProps: {
+      min: 0,
+      precision,
+    },
+    fieldName,
+    label,
+    valueFormat: splitNumberRange(minFieldName, maxFieldName),
+  };
+}
diff --git a/apps/web-ele/src/components/number-range-input/number-range-input.vue b/apps/web-ele/src/components/number-range-input/number-range-input.vue
new file mode 100644
index 000000000..b5ee5391c
--- /dev/null
+++ b/apps/web-ele/src/components/number-range-input/number-range-input.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { ElInputNumber } from 'element-plus';
+
+type NumberRangeValue = [number | undefined, number | undefined];
+
+const props = withDefaults(
+  defineProps<{
+    maxPlaceholder?: string;
+    min?: number;
+    minPlaceholder?: string;
+    modelValue?: NumberRangeValue;
+    precision?: number;
+  }>(),
+  {
+    maxPlaceholder: '最大值',
+    min: undefined,
+    minPlaceholder: '最小值',
+    modelValue: undefined,
+    precision: 2,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: NumberRangeValue | undefined];
+}>();
+
+function normalizeValue(value: unknown) {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : undefined;
+  }
+  if (typeof value === 'string' && value.trim() !== '') {
+    const numberValue = Number(value);
+    return Number.isFinite(numberValue) ? numberValue : undefined;
+  }
+  return undefined;
+}
+
+function updateValue(index: 0 | 1, value: unknown) {
+  const next: NumberRangeValue = [
+    props.modelValue?.[0] ?? undefined,
+    props.modelValue?.[1] ?? undefined,
+  ];
+  next[index] = normalizeValue(value);
+  emit(
+    'update:modelValue',
+    next[0] === undefined && next[1] === undefined ? undefined : next,
+  );
+}
+</script>
+
+<template>
+  <div class="flex w-full items-center gap-2">
+    <ElInputNumber
+      :controls="false"
+      :min="min"
+      :model-value="modelValue?.[0]"
+      :placeholder="minPlaceholder"
+      :precision="precision"
+      class="min-w-0 flex-1"
+      @update:model-value="updateValue(0, $event)"
+    />
+    <span class="shrink-0 text-muted-foreground">至</span>
+    <ElInputNumber
+      :controls="false"
+      :min="min"
+      :model-value="modelValue?.[1]"
+      :placeholder="maxPlaceholder"
+      :precision="precision"
+      class="min-w-0 flex-1"
+      @update:model-value="updateValue(1, $event)"
+    />
+  </div>
+</template>