admin/verify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

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