feat: 金额编辑器交互优化 — 支持光标定位、插入删除、长按删除

- 新增 AmountEditor 组件，页面只接一个组件即可获得完整金额编辑体验 - Numpad 增强：支持 cursorIndex 光标输入 + 长按连续删除 - 金额编辑纯函数 amount-edit.ts 集中管理插入/删除/校验规则 - 记一笔、预算页、周期账单弹窗统一接入 AmountEditor - 默认聚焦金额、点击备注/日期/分类隐藏 Numpad、再次点击金额恢复 - 空值输入小数点规范为 0.
2026-06-09 14:09:14 +08:00
parent ac20a70a20
commit 768c72d7b7
7 changed files with 583 additions and 188 deletions
--- a/DEV.md
+++ b/DEV.md
@@ -119,6 +119,7 @@ onPullDownRefresh(async () => {
 - Never 使用 git stash
 - Never 切换分支
 - Never 过度封装，保持代码简洁明了
+- Never 未确定需求就开始实现

 ## Requirements

--- a/client/src/components/AmountEditor/AmountEditor.vue
+++ b/client/src/components/AmountEditor/AmountEditor.vue
@@ -0,0 +1,263 @@
+<template>
+  <view class="amount-editor" :class="[`amount-editor--${size}`, { 'amount-editor--focused': innerFocused }]">
+    <view class="amount-display" @tap="focusAtEnd">
+      <text class="currency">¥</text>
+      <view class="amount-value">
+        <template v-if="displayChars.length > 0">
+          <template v-for="(char, index) in displayChars" :key="`${char}-${index}`">
+            <text v-if="innerFocused && cursorIndex === index" class="cursor"></text>
+            <text class="amount-char" @tap.stop="focusAt(index + 1)">{{ char }}</text>
+          </template>
+          <text v-if="innerFocused && cursorIndex === displayChars.length" class="cursor"></text>
+        </template>
+        <template v-else>
+          <text class="placeholder" @tap.stop="focusAtEnd">{{ placeholder }}</text>
+          <text v-if="innerFocused" class="cursor"></text>
+        </template>
+      </view>
+      <text v-if="unit" class="unit">{{ unit }}</text>
+    </view>
+
+    <Numpad
+      v-model="innerValue"
+      v-model:cursorIndex="cursorIndex"
+      :max="max"
+      :fixed="fixed"
+      :visible="innerFocused && visible"
+      @confirm="emit('confirm')"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import Numpad from '@/components/Numpad/Numpad.vue'
+import { clampCursorIndex } from '@/components/AmountEditor/amount-edit'
+
+const props = withDefaults(defineProps<{
+  modelValue?: string
+  max?: number
+  fixed?: boolean
+  visible?: boolean
+  autoFocus?: boolean
+  size?: 'small' | 'medium' | 'large'
+  placeholder?: string
+  unit?: string
+}>(), {
+  modelValue: '',
+  max: 9999999.99,
+  fixed: true,
+  visible: true,
+  autoFocus: true,
+  size: 'large',
+  placeholder: '0',
+  unit: ''
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'focus'): void
+  (e: 'blur'): void
+  (e: 'confirm'): void
+}>()
+
+const innerFocused = ref(false)
+const cursorIndex = ref(0)
+
+const innerValue = computed({
+  get: () => props.modelValue || '',
+  set: (value: string) => emit('update:modelValue', value)
+})
+
+const displayChars = computed(() => innerValue.value.split(''))
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    cursorIndex.value = clampCursorIndex(value || '', cursorIndex.value)
+  }
+)
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible && props.autoFocus) {
+      nextTick(focus)
+    } else if (!visible) {
+      blur()
+    }
+  },
+  { immediate: true }
+)
+
+function focus() {
+  cursorIndex.value = innerValue.value.length
+  if (!innerFocused.value) {
+    innerFocused.value = true
+    emit('focus')
+  }
+}
+
+function blur() {
+  if (innerFocused.value) {
+    innerFocused.value = false
+    emit('blur')
+  }
+}
+
+function focusAt(index: number) {
+  if (!props.visible) return
+  cursorIndex.value = clampCursorIndex(innerValue.value, index)
+  if (!innerFocused.value) {
+    innerFocused.value = true
+    emit('focus')
+  }
+}
+
+function focusAtEnd() {
+  focusAt(innerValue.value.length)
+}
+
+defineExpose({ focus, blur })
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
+.amount-editor {
+  width: 100%;
+}
+
+.amount-display {
+  min-height: 156rpx;
+  padding: $space-lg $space-xl;
+  background: $surface;
+  border: 2rpx solid $border;
+  border-radius: $radius-2xl;
+  box-shadow: $shadow-clay;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $space-xs;
+  -webkit-tap-highlight-color: transparent;
+  transition: border-color $transition-normal, box-shadow $transition-normal, transform $transition-fast;
+
+  &:active {
+    transform: scale(0.99);
+  }
+}
+
+.amount-editor--focused .amount-display {
+  border-color: $primary-light;
+  box-shadow: $shadow-clay, 0 8rpx 24rpx rgba(255, 140, 105, 0.16);
+}
+
+.currency,
+.unit {
+  flex-shrink: 0;
+  color: $text-sec;
+  font-weight: 600;
+}
+
+.currency {
+  align-self: flex-start;
+  margin-top: 12rpx;
+  font-family: 'Fredoka', sans-serif;
+  font-size: 40rpx;
+}
+
+.unit {
+  align-self: flex-end;
+  margin-bottom: 14rpx;
+  font-size: $font-md;
+}
+
+.amount-value {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  font-family: 'Fredoka', sans-serif;
+  font-weight: 700;
+  color: $text;
+  line-height: 1.1;
+  word-break: break-all;
+}
+
+.amount-char,
+.placeholder {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.1em;
+}
+
+.amount-char {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.placeholder {
+  color: $text-muted;
+}
+
+.cursor {
+  width: 4rpx;
+  height: 1em;
+  margin: 0 2rpx;
+  border-radius: 999rpx;
+  background: $primary;
+  animation: cursor-blink 1s steps(2, start) infinite;
+}
+
+.amount-editor--small {
+  .amount-display {
+    min-height: 112rpx;
+    padding: $space-md $space-lg;
+    border-radius: $radius-xl;
+  }
+
+  .amount-value {
+    font-size: 52rpx;
+  }
+
+  .currency {
+    margin-top: 6rpx;
+    font-size: 28rpx;
+  }
+}
+
+.amount-editor--medium {
+  .amount-display {
+    min-height: 132rpx;
+  }
+
+  .amount-value {
+    font-size: 68rpx;
+  }
+
+  .currency {
+    font-size: 34rpx;
+  }
+}
+
+.amount-editor--large {
+  .amount-value {
+    font-size: 88rpx;
+  }
+}
+
+@keyframes cursor-blink {
+  0%, 45% { opacity: 1; }
+  46%, 100% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .amount-display {
+    transition: none;
+  }
+
+  .cursor {
+    animation: none;
+  }
+}
+</style>
--- a/client/src/components/AmountEditor/amount-edit.ts
+++ b/client/src/components/AmountEditor/amount-edit.ts
@@ -0,0 +1,108 @@
+export type AmountKey = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '00' | '.'
+export type AmountActionKey = AmountKey | 'delete'
+
+export interface AmountEditOptions {
+  max?: number
+  maxLength?: number
+}
+
+export interface AmountEditResult {
+  value: string
+  cursorIndex: number
+  accepted: boolean
+}
+
+const DEFAULT_MAX = 9999999.99
+// 对应最大金额字符串 '9999999.99' 的长度。
+const DEFAULT_MAX_LENGTH = 10
+const MAX_DECIMAL_PLACES = 2
+
+export function clampCursorIndex(value: string, cursorIndex: number): number {
+  if (cursorIndex < 0) return 0
+  if (cursorIndex > value.length) return value.length
+  return cursorIndex
+}
+
+export function insertAmountKey(
+  value: string,
+  cursorIndex: number,
+  key: AmountKey,
+  options: AmountEditOptions = {}
+): AmountEditResult {
+  const safeCursor = clampCursorIndex(value, cursorIndex)
+
+  // 替换模式：当当前值只有一个 '0' 且光标在末尾时，非 '.' 输入应替换 '0'
+  if (value === '0' && safeCursor === value.length && key !== '.') {
+    // key 可能是 '00'，需要规范化
+    const insert = normalizeInsert('', 0, key)
+    if (insert === '') return { value, cursorIndex: safeCursor, accepted: true }
+    const next = insert
+    if (!isValidAmountInput(next, options)) {
+      return { value, cursorIndex: safeCursor, accepted: false }
+    }
+    return {
+      value: next,
+      cursorIndex: insert.length,
+      accepted: true,
+    }
+  }
+
+  const normalizedInsert = normalizeInsert(value, safeCursor, key)
+  const next = value.slice(0, safeCursor) + normalizedInsert + value.slice(safeCursor)
+
+  if (!isValidAmountInput(next, options)) {
+    return { value, cursorIndex: safeCursor, accepted: false }
+  }
+
+  return {
+    value: next,
+    cursorIndex: safeCursor + normalizedInsert.length,
+    accepted: true,
+  }
+}
+
+export function deleteAmountChar(value: string, cursorIndex: number): AmountEditResult {
+  const safeCursor = clampCursorIndex(value, cursorIndex)
+  if (safeCursor === 0) {
+    return { value, cursorIndex: safeCursor, accepted: false }
+  }
+
+  return {
+    value: value.slice(0, safeCursor - 1) + value.slice(safeCursor),
+    cursorIndex: safeCursor - 1,
+    accepted: true,
+  }
+}
+
+export function applyAmountKey(
+  value: string,
+  cursorIndex: number,
+  key: AmountActionKey,
+  options: AmountEditOptions = {}
+): AmountEditResult {
+  if (key === 'delete') return deleteAmountChar(value, cursorIndex)
+  return insertAmountKey(value, cursorIndex, key, options)
+}
+
+export function isValidAmountInput(value: string, options: AmountEditOptions = {}): boolean {
+  if (value === '') return true
+  if (value.length > (options.maxLength ?? DEFAULT_MAX_LENGTH)) return false
+  if (!/^\d*(\.\d*)?$/.test(value)) return false
+
+  const dotIndex = value.indexOf('.')
+  if (dotIndex >= 0 && value.length - dotIndex - 1 > MAX_DECIMAL_PLACES) return false
+
+  const num = parseFloat(value)
+  if (!Number.isNaN(num) && num > (options.max ?? DEFAULT_MAX)) return false
+
+  return true
+}
+
+function normalizeInsert(value: string, cursorIndex: number, key: AmountKey): string {
+  if ((key === '0' || key === '00') && value === '') return '0'
+  if ((key === '0' || key === '00') && value === '0' && cursorIndex === value.length) return ''
+  if (value === '0' && cursorIndex === value.length && key !== '.') return key
+  // 空值时输入小数点，补前导零，保证合法格式
+  if (value === '' && key === '.') return '0.'
+  return key
+}
--- a/client/src/components/Numpad/Numpad.vue
+++ b/client/src/components/Numpad/Numpad.vue
@@ -1,9 +1,15 @@
 <template>
-  <view class="numpad" :class="{ 'numpad-fixed': fixed }">
+  <view class="numpad" :class="{ 'numpad-fixed': fixed, 'numpad-hidden': !visible }">
    <view class="key" v-for="key in keys" :key="key" @tap="onKeyTap(key)">
      <text class="key-text">{{ key }}</text>
    </view>
-    <view class="key fn" @tap="onDelete">
+    <view
+      class="key fn"
+      @tap="onDeleteTap"
+      @touchstart="onDeleteTouchStart"
+      @touchend="onDeleteTouchEnd"
+      @touchcancel="onDeleteTouchEnd"
+    >
      <view class="backspace-icon">
        <view class="backspace-arrow"></view>
        <view class="backspace-line"></view>
@@ -16,76 +22,118 @@
 </template>

 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onBeforeUnmount } from 'vue'
 import Icon from '@/components/Icon/Icon.vue'
+import {
+  applyAmountKey,
+  clampCursorIndex,
+  type AmountKey
+} from '@/components/AmountEditor/amount-edit'

 const props = withDefaults(defineProps<{
  /** 金额字符串（v-model） */
  modelValue?: string
+  /** 光标位置 */
+  cursorIndex?: number
  /** 最大金额（元） */
  max?: number
  /** 是否固定在底部（弹窗中使用时设为 false） */
  fixed?: boolean
+  /** 是否显示（fixed 模式下控制滑入/滑出） */
+  visible?: boolean
 }>(), {
  modelValue: '',
  max: 9999999.99,
-  fixed: true
+  fixed: true,
+  visible: true
 })

 const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
+  (e: 'update:cursorIndex', index: number): void
  (e: 'confirm'): void
 }>()

-const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '00']
+const keys: AmountKey[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '00']

 const amountStr = computed(() => props.modelValue)

+const effectiveCursorIndex = computed(() =>
+  clampCursorIndex(amountStr.value, props.cursorIndex ?? amountStr.value.length)
+)
+
+let deleteTimer: ReturnType<typeof setTimeout> | null = null
+let deleteLongPressed = false
+
 function vibrate() {
  try { uni.vibrateShort({ type: 'light' }) } catch {}
 }

-function emitValue(val: string) {
-  emit('update:modelValue', val)
-}
-
-function onKeyTap(key: string) {
+function applyKey(key: AmountKey | 'delete') {
  vibrate()
-  const current = amountStr.value
-
-  if (key === '.') {
-    if (current.includes('.')) return
-    if (!current || current === '0') { emitValue('0.'); return }
+  const result = applyAmountKey(
+    amountStr.value,
+    effectiveCursorIndex.value,
+    key,
+    { max: props.max }
+  )
+  if (result.accepted) {
+    emit('update:modelValue', result.value)
+    emit('update:cursorIndex', result.cursorIndex)
  }
-
-  let next: string
-  if (!current || current === '0') {
-    next = (key === '0' || key === '00') ? '0' : key
-  } else {
-    next = current + key
-  }
-
-  if (next.includes('.')) {
-    const decimals = next.split('.')[1]
-    if (decimals && decimals.length > 2) return
-  }
-  if (next.length > 10) return
-  const num = parseFloat(next)
-  if (!isNaN(num) && num > props.max) return
-
-  emitValue(next)
 }

-function onDelete() {
+function onKeyTap(key: AmountKey) {
+  applyKey(key)
+}
+
+function onDeleteTap() {
+  if (deleteLongPressed) {
+    deleteLongPressed = false
+    return
+  }
+  applyKey('delete')
+}
+
+function doDeleteRepeat() {
+  deleteLongPressed = true
+  const result = applyAmountKey(
+    amountStr.value,
+    effectiveCursorIndex.value,
+    'delete',
+    { max: props.max }
+  )
+  if (result.accepted) {
    vibrate()
-  const current = amountStr.value
-  if (current.length > 1) {
-    emitValue(current.slice(0, -1))
+    emit('update:modelValue', result.value)
+    emit('update:cursorIndex', result.cursorIndex)
+    deleteTimer = setTimeout(doDeleteRepeat, 120)
  } else {
-    emitValue('')
+    deleteLongPressed = false
+    deleteTimer = null
  }
 }

+function onDeleteTouchStart() {
+  if (deleteTimer !== null) clearTimeout(deleteTimer)
+  deleteLongPressed = false
+  deleteTimer = setTimeout(doDeleteRepeat, 400)
+}
+
+function onDeleteTouchEnd() {
+  if (deleteTimer !== null) {
+    clearTimeout(deleteTimer)
+    deleteTimer = null
+  }
+}
+
+onBeforeUnmount(() => {
+  if (deleteTimer !== null) {
+    clearTimeout(deleteTimer)
+    deleteTimer = null
+  }
+})
+
 function onConfirm() {
  vibrate()
  emit('confirm')
@@ -101,24 +149,53 @@ function onConfirm() {
  gap: $space-sm;
  padding: $space-sm $space-xl;

+  // 非 fixed 模式的显示/隐藏
+  &:not(.numpad-fixed) {
+    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
+    overflow: hidden;
+    max-height: 600rpx;
+
+    &.numpad-hidden {
+      max-height: 0;
+      opacity: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  // fixed 模式的滑入/滑出
  &.numpad-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
-    background: $surface;
+    background: $bg;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 100;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &.numpad-hidden {
+      transform: translateY(100%);
+    }
  }
 }

 .key {
  height: 96rpx;
  border-radius: $radius-xl;
-  background: $bg;
+  background: $surface;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-clay;
  @include flex-center;
+  transition: all $transition-fast;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;

-  &:active { background: $border; }
+  &:active {
+    background: $surface-warm;
+    box-shadow: $shadow-clay-pressed;
+    transform: scale(0.96);
+  }
 }

 .key-text {
@@ -130,13 +207,25 @@ function onConfirm() {

 .key.fn {
  background: $primary-light;
-  &:active { background: #FFD0C0; }
+  border-color: #FFD0C0;
+
+  &:active {
+    background: #FFD0C0;
+    box-shadow: $shadow-clay-pressed;
+    transform: scale(0.96);
+  }
 }

 .key.eq {
  background: linear-gradient(135deg, $primary, $primary-dark);
-  box-shadow: 0 4rpx 16rpx rgba(255, 140, 105, 0.3);
-  &:active { background: $primary-dark; }
+  border: none;
+  box-shadow: $shadow-md, 0 4rpx 12rpx rgba(255, 140, 105, 0.3);
+
+  &:active {
+    background: $primary-dark;
+    box-shadow: $shadow-clay-pressed;
+    transform: scale(0.96);
+  }
 }

 // 自绘 backspace 图标
--- a/client/src/pages/add/index.vue
+++ b/client/src/pages/add/index.vue
@@ -19,13 +19,16 @@
      </view>
    </view>

-    <view class="amount-display">
-      <text class="currency">¥</text>
-      <text class="digits">{{ displayAmount }}</text>
-      <text class="cursor">|</text>
-    </view>
+    <AmountEditor
+      ref="amountEditorRef"
+      v-model="amountStr"
+      :fixed="true"
+      size="large"
+      :auto-focus="true"
+      @confirm="save"
+    />

-    <scroll-view class="category-scroll" scroll-y :scroll-into-view="scrollToCat">
+    <scroll-view class="category-scroll" scroll-y :scroll-into-view="scrollToCat" @tap="blurAmountEditor">
      <view class="category-grid">
        <view v-for="cat in currentCategories" :key="cat.id" :id="'cat-' + cat.id" class="cat-item" :class="{ suggested: suggestedCatId === cat.id && selectedCat !== cat.id }" @tap="selectedCat = cat.id">
          <view class="cat-icon-wrap">
@@ -41,18 +44,18 @@

    <view class="extra-fields">
      <picker mode="date" :value="selectedDate" :end="todayStr" @change="onDateChange">
-        <view class="extra-row">
+        <view class="extra-row" @tap="blurAmountEditor">
          <Icon name="calendar" :size="28" color="#8B7E7E" />
          <text class="extra-text">{{ dateLabel }}</text>
        </view>
      </picker>
      <view class="extra-row">
        <Icon name="edit" :size="28" color="#8B7E7E" />
-        <input class="extra-input" v-model="note" placeholder="添加备注..." placeholder-class="placeholder" maxlength="200" />
+        <input class="extra-input" v-model="note" placeholder="添加备注..." placeholder-class="placeholder" maxlength="200" @focus="blurAmountEditor" />
      </view>
    </view>

-    <Numpad v-model="amountStr" @confirm="save" />
+

    <SaveSuccess
      v-model:visible="showSuccess"
@@ -71,7 +74,7 @@ import { useCategoryStore } from '@/stores/category'
 import { useTransactionStore } from '@/stores/transaction'
 import { waitForReady } from '@/utils/app-ready'
 import { suggestCategory } from '@/api/stats'
-import Numpad from '@/components/Numpad/Numpad.vue'
+import AmountEditor from '@/components/AmountEditor/AmountEditor.vue'
 import CategoryIcon from '@/components/CategoryIcon/CategoryIcon.vue'
 import Icon from '@/components/Icon/Icon.vue'
 import SaveSuccess from '@/components/SaveSuccess/SaveSuccess.vue'
@@ -95,6 +98,7 @@ const editId = ref<number | null>(null)
 const showSuccess = ref(false)
 const scrollToCat = ref('')
 const todayStr = localToday
+const amountEditorRef = ref<InstanceType<typeof AmountEditor> | null>(null)
 // Remember last selected category per type
 const lastCatByType: Record<string, number | null> = { expense: null, income: null }

@@ -103,10 +107,6 @@ const dateLabel = computed(() => {
  return `${d.getMonth() + 1}月${d.getDate()}日`
 })

-const displayAmount = computed(() => {
-  if (!amountStr.value) return ''
-  return amountStr.value
-})

 const currentCategories = computed(() => catStore.getByType(type.value))

@@ -217,6 +217,10 @@ function onDateChange(e: any) {
  selectedDate.value = e.detail.value
 }

+function blurAmountEditor() {
+  amountEditorRef.value?.blur()
+}
+
 async function save() {
  if (saving.value) return
  const amount = Math.round(parseFloat(amountStr.value || '0') * 100)
@@ -261,6 +265,7 @@ function onContinue() {
  amountStr.value = ''
  note.value = ''
  showSuccess.value = false
+  nextTick(() => amountEditorRef.value?.focus())
 }

 /** 返回上一页 */
@@ -290,10 +295,14 @@ function goBack() {
@import '@/styles/mixins.scss';

 .page {
-  @include page-base;
+  min-height: 100vh;
+  background: $bg;
  display: flex;
  flex-direction: column;
-  padding-bottom: 0;
+  // AmountEditor fixed Numpad 占位: 4行×96rpx + 3间隙×16rpx + padding×2×16rpx = 464rpx
+  $numpad-h: 464rpx;
+  padding-bottom: calc(#{$numpad-h} + constant(safe-area-inset-bottom));
+  padding-bottom: calc(#{$numpad-h} + env(safe-area-inset-bottom));
 }

 .header-fixed {
@@ -358,38 +367,6 @@ function goBack() {

 .income .slider { transform: translateX(160rpx); }

-.amount-display {
-  text-align: center;
-  padding: $space-lg $space-xl $space-md;
-}
-
-.currency {
-  font-family: 'Fredoka', sans-serif;
-  font-size: $space-2xl;
-  font-weight: 500;
-  color: $text-muted;
-  margin-right: $space-xs;
-}
-
-.digits {
-  font-family: 'Fredoka', sans-serif;
-  font-size: 88rpx;
-  font-weight: 700;
-  color: $text;
-  font-variant-numeric: tabular-nums;
-}
-
-.cursor {
-  font-family: 'Fredoka', monospace;
-  font-size: 88rpx;
-  font-weight: 300;
-  color: $primary;
-  animation: blink 1s step-end infinite;
-}
-
-@keyframes blink {
-  50% { opacity: 0; }
-}

 .category-scroll {
  max-height: 320rpx;
@@ -472,10 +449,6 @@ function goBack() {

 .placeholder { color: $text-muted; }

-@media (prefers-reduced-motion: reduce) {
-  .cursor {
-    animation: none;
-    opacity: 1;
-  }
-}
+
+
 </style>
--- a/client/src/pages/budget/index.vue
+++ b/client/src/pages/budget/index.vue
@@ -60,15 +60,15 @@

      <!-- 自定义金额 -->
      <view class="section-title">自定义金额</view>
-      <view class="custom-input">
-        <text class="input-prefix">¥</text>
-        <text class="input-value" :class="{ placeholder: !amountStr }">{{ amountStr }}</text>
-        <text class="input-cursor">|</text>
-        <text class="input-unit">元</text>
-      </view>
-
-      <!-- Numpad -->
-      <Numpad v-model="amountStr" @confirm="onConfirm" />
+      <AmountEditor
+        ref="amountEditorRef"
+        v-model="amountStr"
+        :fixed="true"
+        size="large"
+        unit="元"
+        :auto-focus="true"
+        @confirm="onConfirm"
+      />
    </view>
  </view>
 </template>
@@ -84,7 +84,7 @@ import { formatAmount, getCurrentMonth } from '@/utils/format'
 import type { Budget } from '@/api/budget'
 import { statusBarHeight } from '@/utils/system'
 import BudgetBar from '@/components/BudgetBar/BudgetBar.vue'
-import Numpad from '@/components/Numpad/Numpad.vue'
+import AmountEditor from '@/components/AmountEditor/AmountEditor.vue'
 import Icon from '@/components/Icon/Icon.vue'

 const budgetStore = useBudgetStore()
@@ -97,6 +97,7 @@ const monthExpense = ref(0)
 const loading = ref(true)
 const initialLoaded = ref(false)
 const amountStr = ref('')
+const amountEditorRef = ref<InstanceType<typeof AmountEditor> | null>(null)

 const presets = [1000, 2000, 3000, 5000, 10000]

@@ -162,6 +163,7 @@ onPullDownRefresh(async () => {

 function selectPreset(val: number) {
  amountStr.value = String(val)
+  amountEditorRef.value?.focus()
 }

 async function onConfirm() {
@@ -367,60 +369,11 @@ function goBack() {
  color: $text;
 }

-.custom-input {
-  display: flex;
-  align-items: baseline;
-  gap: $space-xs;
-  margin-bottom: $space-lg;
-  padding: $space-md $space-lg;
-  background: $surface;
-  border-radius: $radius-xl;
-  border: 2rpx solid $border;
-}

-.input-prefix {
-  font-family: 'Fredoka', sans-serif;
-  font-size: $font-3xl;
-  font-weight: 600;
-  color: $primary;
-}
-
-.input-value {
-  font-family: 'Fredoka', sans-serif;
-  font-size: $font-4xl;
-  font-weight: 600;
-  color: $text;
-  flex: 1;
-
-  &.placeholder {
-    color: #D0C4C4;
-  }
-}
-
-.input-unit {
-  font-size: $font-lg;
-  color: $text-sec;
-}
-
-.input-cursor {
-  font-family: 'Fredoka', monospace;
-  font-size: $font-4xl;
-  font-weight: 300;
-  color: $primary;
-  animation: blink 1s step-end infinite;
-}
-
-@keyframes blink {
-  50% { opacity: 0; }
-}

@media (prefers-reduced-motion: reduce) {
  .preview-skeleton {
    animation: none;
  }
-  .input-cursor {
-    animation: none;
-    opacity: 1;
-  }
 }
 </style>
--- a/client/src/pages/recurring/index.vue
+++ b/client/src/pages/recurring/index.vue
@@ -65,11 +65,11 @@
    </scroll-view>

    <!-- 添加/编辑弹窗 -->
-    <view class="modal-mask" v-if="showModal" @tap="showModal = false">
+    <view class="modal-mask" v-if="showModal" @tap="closeModal">
      <view class="form-modal" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">{{ editingId ? '编辑周期账单' : '添加周期账单' }}</text>
-          <view class="modal-close" @tap="showModal = false">
+          <view class="modal-close" @tap="closeModal">
            <text class="modal-close-text">×</text>
          </view>
        </view>
@@ -84,13 +84,17 @@
          </view>

          <!-- 金额 -->
-          <view class="amount-row">
-            <text class="currency">¥</text>
-            <text class="digits" :class="{ placeholder: !amountStr }">{{ amountStr || '0' }}</text>
-          </view>
+          <AmountEditor
+            ref="amountEditorRef"
+            v-model="amountStr"
+            :fixed="false"
+            size="medium"
+            :auto-focus="showModal"
+            @confirm="handleSubmit"
+          />

          <!-- 分类 -->
-          <scroll-view class="category-scroll" scroll-x>
+          <scroll-view class="category-scroll" scroll-x @tap="blurAmountEditor">
            <view class="category-row">
              <view v-for="cat in currentCategories" :key="cat.id" class="cat-item" @tap="form.category_id = cat.id">
                <CategoryIcon :label="cat.name[0]" :color="cat.color" :bg-color="cat.color + '15'" size="sm" :selected="form.category_id === cat.id" />
@@ -102,14 +106,14 @@
          <!-- 备注 -->
          <view class="form-item">
            <Icon name="edit" :size="28" color="#8B7E7E" />
-            <input class="form-input" v-model="form.note" placeholder="备注（可选）" maxlength="50" />
+            <input class="form-input" v-model="form.note" placeholder="备注（可选）" maxlength="50" @focus="blurAmountEditor" />
          </view>

          <!-- 周期 -->
          <view class="form-item">
            <Icon name="calendar" :size="28" color="#8B7E7E" />
            <view class="freq-options">
-              <view v-for="f in frequencies" :key="f.value" class="freq-tab" :class="{ active: form.frequency === f.value }" @tap="form.frequency = f.value">
+              <view v-for="f in frequencies" :key="f.value" class="freq-tab" :class="{ active: form.frequency === f.value }" @tap="selectFrequency(f.value)">
                <text class="freq-text">{{ f.label }}</text>
              </view>
            </view>
@@ -137,8 +141,7 @@

        </scroll-view>

-        <!-- 数字键盘：在滚动区外，始终可见，避免 scroll-view 吞事件 -->
-        <Numpad v-model="amountStr" :fixed="false" @confirm="handleSubmit" />
+

        <view class="modal-footer" @tap="handleSubmit">
          <text class="submit-text">{{ editingId ? '保存修改' : '添加' }}</text>
@@ -150,7 +153,7 @@
 </template>

 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, nextTick } from 'vue'
 import { waitForReady } from '@/utils/app-ready'
 import { statusBarHeight, capsuleRight } from '@/utils/system'
 import { formatAmount } from '@/utils/format'
@@ -158,9 +161,8 @@ import { useCategoryStore } from '@/stores/category'
 import { getRecurringTemplates, createRecurringTemplate, updateRecurringTemplate, deleteRecurringTemplate, syncRecurring } from '@/api/recurring'
 import Icon from '@/components/Icon/Icon.vue'
 import CategoryIcon from '@/components/CategoryIcon/CategoryIcon.vue'
-import Numpad from '@/components/Numpad/Numpad.vue'
+import AmountEditor from '@/components/AmountEditor/AmountEditor.vue'
 import type { RecurringTemplate } from '@/api/recurring'
-import type { Category } from '@/stores/category'

 const catStore = useCategoryStore()

@@ -171,6 +173,7 @@ const editingId = ref<number | null>(null)
 const amountStr = ref('')
 const saving = ref(false)
 const syncCount = ref(0)
+const amountEditorRef = ref<InstanceType<typeof AmountEditor> | null>(null)

 const freqMap: Record<string, string> = {
  weekly: '每周', monthly: '每月', yearly: '每年'
@@ -230,6 +233,7 @@ function openAddModal() {
  if (cats.length > 0) form.value.category_id = cats[0].id
  amountStr.value = ''
  showModal.value = true
+  nextTick(() => amountEditorRef.value?.focus())
 }

 function openEditModal(item: RecurringTemplate) {
@@ -244,6 +248,7 @@ function openEditModal(item: RecurringTemplate) {
  }
  amountStr.value = (item.amount / 100).toString()
  showModal.value = true
+  nextTick(() => amountEditorRef.value?.focus())
 }

 async function toggleActive(item: RecurringTemplate) {
@@ -284,7 +289,7 @@ async function handleSubmit() {
    } else {
      await createRecurringTemplate(data)
    }
-    showModal.value = false
+    closeModal()
    await loadList()
    uni.showToast({ title: editingId.value ? '已更新' : '已添加', icon: 'success' })
  } catch {
@@ -312,6 +317,20 @@ async function handleDelete(item: RecurringTemplate) {
  })
 }

+function closeModal() {
+  amountEditorRef.value?.blur()
+  showModal.value = false
+}
+
+function blurAmountEditor() {
+  amountEditorRef.value?.blur()
+}
+
+function selectFrequency(value: 'weekly' | 'monthly' | 'yearly') {
+  blurAmountEditor()
+  form.value.frequency = value
+}
+
 function goBack() { uni.navigateBack() }
 </script>

@@ -463,18 +482,7 @@ function goBack() { uni.navigateBack() }
 }
 .income .slider { transform: translateX(140rpx); }

-/* 金额 */
-.amount-row {
-  text-align: center; padding: $space-sm 0 $space-md;
-}
-.currency {
-  font-family: 'Fredoka', sans-serif; font-size: $space-2xl; font-weight: 500;
-  color: $text-muted; margin-right: $space-xs;
-}
-.digits {
-  font-family: 'Fredoka', sans-serif; font-size: 72rpx; font-weight: 600; color: $text;
-  &.placeholder { color: #D0C4C4; }
-}
+

 /* 分类 */
 .category-scroll { margin-bottom: $space-md; }