fix: 使用shadcn NumberField组件并限制宽度

- 使用NumberField组件替代Input
- 限制宽度为w-32
- 配置货币格式显示

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-09 19:58:38 +08:00
parent 8385329056
commit 0a0f23ab0c
2 changed files with 30 additions and 26 deletions
+13 -11
View File
@@ -6,7 +6,7 @@ import { useRoute, useRouter } from 'vue-router'
import { toast } from 'vue-sonner' import { toast } from 'vue-sonner'
import { BasicPage } from '@/components/global-layout' import { BasicPage } from '@/components/global-layout'
import { Input } from '@/components/ui/input' import { NumberField, NumberFieldContent, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput } from '@/components/ui/number-field'
import api from '@/services/api' import api from '@/services/api'
const router = useRouter() const router = useRouter()
@@ -246,18 +246,20 @@ onMounted(() => {
</div> </div>
<div class="space-y-2"> <div class="space-y-2">
<UiLabel for="price">{{ t('admin.agentApps.createForm.price') }} <span class="text-destructive">*</span></UiLabel> <UiLabel>{{ t('admin.agentApps.createForm.price') }} <span class="text-destructive">*</span></UiLabel>
<div class="relative"> <NumberField
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">¥</span>
<Input
id="price"
v-model="formData.price" v-model="formData.price"
type="number" :min="0"
class="pl-7" :format-options="{ style: 'currency', currency: 'CNY', currencyDisplay: 'symbol' }"
:placeholder="t('admin.agentApps.createForm.pricePlaceholder')"
:disabled="saving" :disabled="saving"
/> class="w-32"
</div> >
<NumberFieldContent>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberFieldContent>
</NumberField>
</div> </div>
</UiCardContent> </UiCardContent>
</UiCard> </UiCard>
+13 -11
View File
@@ -6,7 +6,7 @@ import { useRouter } from 'vue-router'
import { toast } from 'vue-sonner' import { toast } from 'vue-sonner'
import { BasicPage } from '@/components/global-layout' import { BasicPage } from '@/components/global-layout'
import { Input } from '@/components/ui/input' import { NumberField, NumberFieldContent, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput } from '@/components/ui/number-field'
import api from '@/services/api' import api from '@/services/api'
const router = useRouter() const router = useRouter()
@@ -232,18 +232,20 @@ onMounted(() => {
</div> </div>
<div class="space-y-2"> <div class="space-y-2">
<UiLabel for="price">{{ t('admin.agentApps.createForm.price') }} <span class="text-destructive">*</span></UiLabel> <UiLabel>{{ t('admin.agentApps.createForm.price') }} <span class="text-destructive">*</span></UiLabel>
<div class="relative"> <NumberField
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">¥</span>
<Input
id="price"
v-model="formData.price" v-model="formData.price"
type="number" :min="0"
class="pl-7" :format-options="{ style: 'currency', currency: 'CNY', currencyDisplay: 'symbol' }"
:placeholder="t('admin.agentApps.createForm.pricePlaceholder')"
:disabled="saving" :disabled="saving"
/> class="w-32"
</div> >
<NumberFieldContent>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberFieldContent>
</NumberField>
</div> </div>
<div class="space-y-2"> <div class="space-y-2">