统一组件

Web/src/components/TransactionDetail.vue

@@ -45,16 +45,17 @@
             type="number"
             :rules="[{ required: true, message: '请输入交易后余额' }]"
           />
-          <van-field
-            v-model="editForm.typeText"
-            is-link
-            readonly
-            name="type"
-            label="交易类型"
-            placeholder="请选择交易类型"
-            @click="showTypePicker = true"
-            :rules="[{ required: true, message: '请选择交易类型' }]"
-          />
+
+          <van-field name="type" label="交易类型">
+            <template #input>
+              <van-radio-group v-model="editForm.type" direction="horizontal">
+                <van-radio :name="0">支出</van-radio>
+                <van-radio :name="1">收入</van-radio>
+                <van-radio :name="2">不计</van-radio>
+              </van-radio-group>
+            </template>
+          </van-field>
+
           <van-field name="classify" label="交易分类">
             <template #input>
               <span v-if="!editForm.classify" style="color: #c8c9cc;">请选择交易分类</span>
@@ -103,16 +104,6 @@
     </div>
   </PopupContainer>
 
-  <!-- 交易类型选择器 -->
-  <van-popup v-model:show="showTypePicker" position="bottom" round>
-    <van-picker
-      show-toolbar
-      :columns="typeColumns"
-      @confirm="onTypeConfirm"
-      @cancel="showTypePicker = false"
-    />
-  </van-popup>
-
   <!-- 新增分类对话框 -->
   <van-dialog 
     v-model:show="showAddClassify" 
@@ -167,16 +158,8 @@ const emit = defineEmits(['update:show', 'save'])
 const visible = ref(false)
 const submitting = ref(false)
 
-// 交易类型
-const typeColumns = [
-  { text: '支出', value: 0 },
-  { text: '收入', value: 1 },
-  { text: '不计入收支', value: 2 }
-]
-
 // 分类相关
 const classifyColumns = ref([])
-const showTypePicker = ref(false)
 const showAddClassify = ref(false)
 const newClassify = ref('')
 
@@ -187,7 +170,6 @@ const editForm = reactive({
   amount: '',
   balance: '',
   type: 0,
-  typeText: '',
   classify: ''
 })
 
@@ -204,7 +186,6 @@ watch(() => props.transaction, (newVal) => {
     editForm.amount = String(newVal.amount)
     editForm.balance = String(newVal.balance)
     editForm.type = newVal.type
-    editForm.typeText = getTypeName(newVal.type)
     editForm.classify = newVal.classify || ''
     
     // 根据交易类型加载分类
@@ -277,13 +258,6 @@ const selectClassify = (classify) => {
   editForm.classify = classify
 }
 
-// 交易类型选择确认
-const onTypeConfirm = ({ selectedValues, selectedOptions }) => {
-  editForm.type = selectedValues[0]
-  editForm.typeText = selectedOptions[0].text
-  showTypePicker.value = false
-}
-
 // 新增分类
 const addNewClassify = async () => {
   if (!newClassify.value.trim()) {