From 82bb13c385cca38f612da7aa2eeec51751ba5fd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E8=AF=9A?= <sunchengsuncheng@gmail.com>
Date: Sat, 3 Jan 2026 11:07:33 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/src/components/Bill/BillForm.vue          |   2 +-
 Web/src/components/ClassifyPicker.vue         | 169 --------
 Web/src/components/ReasonGroupList.vue        |  58 +--
 Web/src/components/TransactionDetail.vue      |  48 +-
 .../components/TransactionDetailDialog.vue    | 410 ------------------
 Web/src/views/PeriodicRecord.vue              |  62 +--
 6 files changed, 45 insertions(+), 704 deletions(-)
 delete mode 100644 Web/src/components/ClassifyPicker.vue
 delete mode 100644 Web/src/components/TransactionDetailDialog.vue

diff --git a/Web/src/components/Bill/BillForm.vue b/Web/src/components/Bill/BillForm.vue
index c45e83a..4c8c4da 100644
--- a/Web/src/components/Bill/BillForm.vue
+++ b/Web/src/components/Bill/BillForm.vue
@@ -116,7 +116,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch, toRefs } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { showToast } from 'vant'
 import dayjs from 'dayjs'
 import { getCategoryList, createCategory } from '@/api/transactionCategory'
diff --git a/Web/src/components/ClassifyPicker.vue b/Web/src/components/ClassifyPicker.vue
deleted file mode 100644
index 799d6a7..0000000
--- a/Web/src/components/ClassifyPicker.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-  <!-- 分类选择器弹窗 -->
-  <van-popup v-model:show="visible" position="bottom" round>
-    <van-picker
-      ref="pickerRef"
-      :columns="classifyColumns"
-      @confirm="onConfirm"
-      @cancel="onCancel"
-    >
-      <template #toolbar>
-        <div class="picker-toolbar">
-          <van-button class="toolbar-cancel" size="small" @click="onClear">清空</van-button>
-          <van-button class="toolbar-add" size="small" type="primary" @click="showAddDialog = true">新增</van-button>
-          <van-button class="toolbar-confirm" size="small" type="primary" @click="confirmSelect">确认</van-button>
-        </div>
-      </template>
-    </van-picker>
-  </van-popup>
-
-  <!-- 新增分类对话框 -->
-  <van-dialog 
-    v-model:show="showAddDialog" 
-    title="新增交易分类" 
-    show-cancel-button
-    @confirm="addNewClassify"
-  >
-    <van-field v-model="newClassifyName" placeholder="请输入新的交易分类" />
-  </van-dialog>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-import { showToast } from 'vant'
-import { getCategoryList, createCategory } from '@/api/transactionCategory'
-
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  // 当前选中的分类
-  selectedClassify: {
-    type: String,
-    default: ''
-  },
-  // 交易类型（用于新增分类时传递）
-  transactionType: {
-    type: Number,
-    default: 0
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'confirm', 'clear'])
-
-const visible = ref(props.modelValue)
-const pickerRef = ref(null)
-const classifyColumns = ref([])
-const showAddDialog = ref(false)
-const newClassifyName = ref('')
-
-// 监听外部显示状态变化
-watch(() => props.modelValue, (val) => {
-  visible.value = val
-  if (val) {
-    loadClassifyList()
-  }
-})
-
-// 监听内部显示状态变化
-watch(visible, (val) => {
-  emit('update:modelValue', val)
-})
-
-// 加载分类列表
-const loadClassifyList = async () => {
-  try {
-    const response = await getCategoryList()
-    if (response.success) {
-      classifyColumns.value = (response.data || []).map(item => ({
-        text: item.name,
-        value: item.name,
-        id: item.id
-      }))
-    }
-  } catch (error) {
-    console.error('加载分类列表出错:', error)
-  }
-}
-
-// 确认选择
-const onConfirm = ({ selectedOptions }) => {
-  if (selectedOptions && selectedOptions[0]) {
-    emit('confirm', selectedOptions[0].text)
-  }
-  visible.value = false
-}
-
-// 取消
-const onCancel = () => {
-  visible.value = false
-}
-
-// 清空分类
-const onClear = () => {
-  emit('clear')
-  visible.value = false
-  showToast('已清空分类')
-}
-
-// 确认选择（从 picker 中获取选中值）
-const confirmSelect = () => {
-  if (pickerRef.value) {
-    const selectedValues = pickerRef.value.getSelectedOptions()
-    if (selectedValues && selectedValues[0]) {
-      emit('confirm', selectedValues[0].text)
-    }
-  }
-  visible.value = false
-}
-
-// 新增分类
-const addNewClassify = async () => {
-  if (!newClassifyName.value.trim()) {
-    showToast('请输入分类名称')
-    return
-  }
-  
-  try {
-    const response = await createCategory({
-      name: newClassifyName.value.trim(),
-      type: props.transactionType
-    })
-    
-    if (response.success) {
-      showToast('新增分类成功')
-      const newClassify = response.data.name
-      newClassifyName.value = ''
-      // 重新加载分类列表
-      await loadClassifyList()
-      // 自动选中新增的分类
-      emit('confirm', newClassify)
-      visible.value = false
-    } else {
-      showToast(response.message || '新增分类失败')
-    }
-  } catch (error) {
-    console.error('新增分类失败:', error)
-    showToast('新增分类失败')
-  }
-}
-</script>
-
-<style scoped>
-.picker-toolbar {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  padding: 5px 10px;
-  border-bottom: 1px solid var(--van-border-color);
-}
-
-.toolbar-cancel {
-  margin-right: auto;
-}
-
-.toolbar-confirm {
-  margin-left: auto;
-}
-</style>
diff --git a/Web/src/components/ReasonGroupList.vue b/Web/src/components/ReasonGroupList.vue
index 4d8860e..854e0c8 100644
--- a/Web/src/components/ReasonGroupList.vue
+++ b/Web/src/components/ReasonGroupList.vue
@@ -56,7 +56,7 @@
       v-model="showTransactionList"
       :title="selectedGroup?.reason || '交易记录'"
       :subtitle="groupTransactionsTotal ? `共 ${groupTransactionsTotal} 笔交易` : ''"
-      height="80%"
+      height="85%"
     >
       <template #header-actions>
         <van-button 
@@ -80,10 +80,10 @@
     </PopupContainer>
 
     <!-- 账单详情弹窗 -->
-    <TransactionDetailDialog
-      v-model="showTransactionDetail"
+    <TransactionDetail
+      v-model:show="showTransactionDetail"
       :transaction="selectedTransaction"
-      @saved="handleTransactionSaved"
+      @save="handleTransactionSaved"
     />
 
     <!-- 批量设置对话框 -->
@@ -112,17 +112,16 @@
             input-align="left"
           />
 
-          <!-- 交易类型选择 -->
-          <van-field
-            v-model="batchForm.typeName"
-            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="batchForm.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="分类">
@@ -166,16 +165,6 @@
       </van-form>
     </van-dialog>
 
-    <!-- 交易类型选择器 -->
-    <van-popup v-model:show="showTypePicker" position="bottom" round>
-      <van-picker
-        show-toolbar
-        :columns="typeOptions"
-        @confirm="handleConfirmType"
-        @cancel="showTypePicker = false"
-      />
-    </van-popup>
-
     <!-- 新增分类对话框 -->
     <van-dialog 
       v-model:show="showAddClassify" 
@@ -200,7 +189,7 @@ import {
 import { getReasonGroups, batchUpdateByReason, getTransactionList } from '@/api/transactionRecord'
 import { getCategoryList, createCategory } from '@/api/transactionCategory'
 import TransactionList from './TransactionList.vue'
-import TransactionDetailDialog from './TransactionDetailDialog.vue'
+import TransactionDetail from './TransactionDetail.vue'
 import PopupContainer from './PopupContainer.vue'
 
 const props = defineProps({
@@ -218,13 +207,6 @@ const props = defineProps({
 
 const emit = defineEmits(['long-press', 'data-loaded', 'data-changed'])
 
-// 交易类型选项
-const typeOptions = [
-  { text: '支出', value: 0 },
-  { text: '收入', value: 1 },
-  { text: '不计收支', value: 2 }
-]
-
 // 数据状态
 const groups = ref([])
 const loading = ref(false)
@@ -250,7 +232,6 @@ const transactionPageSize = ref(20)
 
 // 批量分类相关状态
 const showBatchDialog = ref(false)
-const showTypePicker = ref(false)
 const showAddClassify = ref(false)
 const batchFormRef = ref(null)
 const batchGroup = ref(null)
@@ -398,13 +379,6 @@ const selectClassify = (classify) => {
   batchForm.value.classify = classify
 }
 
-// 确认选择交易类型
-const handleConfirmType = ({ selectedOptions }) => {
-  batchForm.value.type = selectedOptions[0].value
-  batchForm.value.typeName = selectedOptions[0].text
-  showTypePicker.value = false
-}
-
 // 新增分类
 const addNewClassify = async () => {
   if (!newClassify.value.trim()) {
@@ -571,7 +545,7 @@ onBeforeUnmount(() => {
 })
 
 // 当有交易新增/修改/批量更新时的刷新监听
-const onGlobalTransactionsChanged = (e) => {
+const onGlobalTransactionsChanged = () => {
   if (showTransactionList.value && selectedGroup.value) {
     groupTransactions.value = []
     transactionPageIndex.value = 1
diff --git a/Web/src/components/TransactionDetail.vue b/Web/src/components/TransactionDetail.vue
index d529213..0edbd15 100644
--- a/Web/src/components/TransactionDetail.vue
+++ b/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()) {
diff --git a/Web/src/components/TransactionDetailDialog.vue b/Web/src/components/TransactionDetailDialog.vue
deleted file mode 100644
index 404100f..0000000
--- a/Web/src/components/TransactionDetailDialog.vue
+++ /dev/null
@@ -1,410 +0,0 @@
-<template>
-  <van-popup 
-    v-model:show="visible" 
-    position="bottom" 
-    :style="{ height: '70%' }"
-    round
-    closeable
-    @closed="handleClosed"
-  >
-    <div class="transaction-detail-dialog">
-      <div class="dialog-header">
-        <h3 class="dialog-title">账单详情</h3>
-      </div>
-
-      <div class="dialog-content">
-        <van-form ref="formRef">
-          <van-cell-group inset>
-            <!-- 交易摘要 -->
-            <van-field
-              :model-value="formData.reason"
-              label="交易摘要"
-              readonly
-              input-align="left"
-            />
-
-            <!-- 交易时间 -->
-            <van-field
-              :model-value="formatDateTime(formData.occurredAt)"
-              label="交易时间"
-              readonly
-              input-align="left"
-            />
-
-            <!-- 卡号 -->
-            <van-field
-              v-if="formData.card"
-              :model-value="formData.card"
-              label="卡号"
-              readonly
-              input-align="left"
-            />
-
-            <!-- 交易金额 -->
-            <van-field
-              v-model.number="formData.amount"
-              label="交易金额"
-              type="number"
-              placeholder="请输入金额"
-              input-align="left"
-              :rules="[{ required: true, message: '请输入交易金额' }]"
-            />
-
-            <!-- 交易后余额 -->
-            <van-field
-              v-model.number="formData.balance"
-              label="交易后余额"
-              type="number"
-              placeholder="请输入余额"
-              input-align="left"
-            />
-
-            <!-- 交易类型 -->
-            <van-field
-              v-model="typeText"
-              is-link
-              readonly
-              label="交易类型"
-              placeholder="请选择交易类型"
-              @click="showTypePicker = true"
-              :rules="[{ required: true, message: '请选择交易类型' }]"
-            />
-
-            <!-- 分类选择 -->
-            <van-field label="分类">
-              <template #input>
-                <span v-if="!formData.classify" style="opacity: 0.4;">请选择分类</span>
-                <span v-else>{{ formData.classify }}</span>
-              </template>
-            </van-field>
-            
-            <!-- 分类按钮网格 -->
-            <div class="classify-buttons">
-              <van-button
-                type="success"
-                size="small"
-                class="classify-btn"
-                @click="showAddClassify = true"
-              >
-                + 新增
-              </van-button>
-              <van-button
-                v-for="item in classifyOptions"
-                :key="item.id"
-                :type="formData.classify === item.name ? 'primary' : 'default'"
-                size="small"
-                class="classify-btn"
-                @click="selectClassify(item.name)"
-              >
-                {{ item.name }}
-              </van-button>
-              <van-button
-                v-if="formData.classify"
-                type="warning"
-                size="small"
-                class="classify-btn"
-                @click="clearClassify"
-              >
-                清空
-              </van-button>
-            </div>
-          </van-cell-group>
-        </van-form>
-      </div>
-
-      <div class="dialog-footer">
-        <van-button 
-          type="primary" 
-          block 
-          :loading="saving"
-          @click="handleSave"
-        >
-          保存
-        </van-button>
-      </div>
-    </div>
-
-    <!-- 交易类型选择器 -->
-    <van-popup v-model:show="showTypePicker" position="bottom" round>
-      <van-picker
-        show-toolbar
-        :columns="typeOptions"
-        @confirm="handleConfirmType"
-        @cancel="showTypePicker = false"
-      />
-    </van-popup>
-
-    <!-- 新增分类对话框 -->
-    <van-dialog 
-      v-model:show="showAddClassify" 
-      title="新增交易分类" 
-      show-cancel-button
-      @confirm="addNewClassify"
-    >
-      <van-field v-model="newClassify" placeholder="请输入新的交易分类" />
-    </van-dialog>
-  </van-popup>
-</template>
-
-<script setup>
-import { ref, watch, computed } from 'vue'
-import { showToast, showSuccessToast } from 'vant'
-import { updateTransaction } from '@/api/transactionRecord'
-import { getCategoryList, createCategory } from '@/api/transactionCategory'
-
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  transaction: {
-    type: Object,
-    default: null
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'saved'])
-
-const visible = ref(props.modelValue)
-const formRef = ref(null)
-const saving = ref(false)
-const showTypePicker = ref(false)
-const showAddClassify = ref(false)
-const newClassify = ref('')
-const categories = ref([])
-
-// 交易类型选项
-const typeOptions = [
-  { text: '支出', value: 0 },
-  { text: '收入', value: 1 },
-  { text: '不计收支', value: 2 }
-]
-
-// 表单数据
-const formData = ref({
-  id: null,
-  reason: '',
-  occurredAt: '',
-  card: '',
-  amount: 0,
-  balance: 0,
-  type: 0,
-  classify: ''
-})
-
-// 类型文本
-const typeText = computed(() => {
-  const option = typeOptions.find(o => o.value === formData.value.type)
-  return option?.text || ''
-})
-
-// 根据选中的类型过滤分类选项
-const classifyOptions = computed(() => {
-  return categories.value.filter(c => c.type === formData.value.type)
-})
-
-// 监听modelValue变化
-watch(() => props.modelValue, (val) => {
-  visible.value = val
-  if (val && props.transaction) {
-    initFormData()
-    loadCategories()
-  }
-})
-
-// 监听visible变化
-watch(visible, (val) => {
-  emit('update:modelValue', val)
-})
-
-// 监听交易类型变化
-watch(() => formData.value.type, () => {
-  // 清空已选的分类（如果当前分类不属于新类型）
-  const hasCurrentClassify = classifyOptions.value.some(
-    c => c.name === formData.value.classify
-  )
-  if (!hasCurrentClassify) {
-    formData.value.classify = ''
-  }
-})
-
-// 初始化表单数据
-const initFormData = () => {
-  if (props.transaction) {
-    formData.value = {
-      id: props.transaction.id,
-      reason: props.transaction.reason || '',
-      occurredAt: props.transaction.occurredAt || '',
-      card: props.transaction.card || '',
-      amount: props.transaction.amount || 0,
-      balance: props.transaction.balance || 0,
-      type: props.transaction.type ?? 0,
-      classify: props.transaction.classify || ''
-    }
-  }
-}
-
-// 加载分类列表
-const loadCategories = async () => {
-  try {
-    const res = await getCategoryList()
-    if (res.success) {
-      categories.value = res.data || []
-    }
-  } catch (error) {
-    console.error('获取分类列表失败:', error)
-  }
-}
-
-// 格式化日期时间
-const formatDateTime = (dateStr) => {
-  if (!dateStr) return ''
-  const date = new Date(dateStr)
-  return date.toLocaleString('zh-CN', { 
-    year: 'numeric', 
-    month: '2-digit', 
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit'
-  })
-}
-
-// 选择分类
-const selectClassify = (classify) => {
-  formData.value.classify = classify
-}
-
-// 确认选择交易类型
-const handleConfirmType = ({ selectedOptions }) => {
-  formData.value.type = selectedOptions[0].value
-  showTypePicker.value = false
-}
-
-// 新增分类
-const addNewClassify = async () => {
-  if (!newClassify.value.trim()) {
-    showToast('请输入分类名称')
-    return
-  }
-  
-  try {
-    const categoryName = newClassify.value.trim()
-    
-    const response = await createCategory({
-      name: categoryName,
-      type: formData.value.type
-    })
-    
-    if (response.success) {
-      showToast('分类创建成功')
-      await loadCategories()
-      formData.value.classify = categoryName
-    } else {
-      showToast(response.message || '创建分类失败')
-    }
-  } catch (error) {
-    console.error('创建分类出错:', error)
-    showToast('创建分类失败')
-  } finally {
-    newClassify.value = ''
-    showAddClassify.value = false
-  }
-}
-
-// 清空分类
-const clearClassify = () => {
-  formData.value.classify = ''
-}
-
-// 保存
-const handleSave = async () => {
-  try {
-    await formRef.value?.validate()
-    
-    saving.value = true
-    
-    const res = await updateTransaction({
-      id: formData.value.id,
-      amount: formData.value.amount,
-      balance: formData.value.balance,
-      type: formData.value.type,
-      classify: formData.value.classify || ''
-    })
-    
-    if (res.success) {
-      showSuccessToast('保存成功')
-      visible.value = false
-      emit('saved', formData.value)
-    } else {
-      showToast(res.message || '保存失败')
-    }
-  } catch (error) {
-    if (error !== 'cancel') {
-      console.error('保存失败:', error)
-      showToast(error.message || '保存失败')
-    }
-  } finally {
-    saving.value = false
-  }
-}
-
-// 处理弹窗关闭
-const handleClosed = () => {
-  formRef.value?.resetValidation()
-}
-</script>
-
-<style scoped>
-.transaction-detail-dialog {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.dialog-header {
-  padding: 20px 16px 12px;
-  border-bottom: 1px solid var(--van-border-color, #ebedf0);
-}
-
-.dialog-title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 500;
-  text-align: center;
-}
-
-.dialog-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px 0;
-}
-
-.dialog-footer {
-  padding: 12px 16px;
-  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
-  border-top: 1px solid var(--van-border-color, #ebedf0);
-}
-
-.classify-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 12px 16px;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.classify-btn {
-  flex: 0 0 auto;
-  min-width: 70px;
-  border-radius: 16px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .dialog-header,
-  .dialog-footer {
-    border-color: var(--van-border-color, #3a3a3a);
-  }
-}
-</style>
diff --git a/Web/src/views/PeriodicRecord.vue b/Web/src/views/PeriodicRecord.vue
index 4edba57..1d0aa1e 100644
--- a/Web/src/views/PeriodicRecord.vue
+++ b/Web/src/views/PeriodicRecord.vue
@@ -91,7 +91,7 @@
       height="85%"
     >
       <van-form @submit="onSubmit">
-          <van-cell-group inset title="周期设置">
+        <van-cell-group inset title="周期设置">
             <van-field
               v-model="form.periodicTypeText"
               is-link
@@ -150,9 +150,9 @@
               type="number"
               :rules="[{ required: true, message: '请输入年开始后第几天' }]"
             />
-          </van-cell-group>
+        </van-cell-group>
 
-          <van-cell-group inset title="基本信息">
+        <van-cell-group inset title="基本信息">
             <van-field
               v-model="form.reason"
               name="reason"
@@ -173,15 +173,18 @@
               :rules="[{ required: true, message: '请输入金额' }]"
             />
             <van-field
-              v-model="form.typeText"
-              is-link
-              readonly
+              v-model="form.type"
               name="type"
               label="类型"
-              placeholder="请选择交易类型"
-              @click="showTypePicker = true"
-              :rules="[{ required: true, message: '请选择交易类型' }]"
-            />
+            >
+              <template #input>
+                <van-radio-group v-model="form.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="!form.classify" style="color: #c8c9cc;">请选择交易分类</span>
@@ -219,25 +222,16 @@
                 清空
               </van-button>
             </div>
-          </van-cell-group>
+        </van-cell-group>
 
-          <div style="margin: 16px;">
+        <div style="margin: 16px;">
             <van-button round block type="primary" native-type="submit" :loading="submitting">
               {{ isEdit ? '更新' : '确认添加' }}
             </van-button>
-          </div>
-        </van-form>
+        </div>
+      </van-form>
     </PopupContainer>
 
-    <!-- 交易类型选择器 -->
-    <van-popup v-model:show="showTypePicker" position="bottom" round>
-      <van-picker
-        :columns="typeColumns"
-        @confirm="onTypeConfirm"
-        @cancel="showTypePicker = false"
-      />
-    </van-popup>
-
     <!-- 周期类型选择器 -->
     <van-popup v-model:show="showPeriodicTypePicker" position="bottom" round>
       <van-picker
@@ -306,7 +300,6 @@ const total = ref(0)
 const dialogVisible = ref(false)
 const isEdit = ref(false)
 const submitting = ref(false)
-const showTypePicker = ref(false)
 const showPeriodicTypePicker = ref(false)
 const showWeekdaysPicker = ref(false)
 const showMonthDaysPicker = ref(false)
@@ -316,13 +309,6 @@ const newClassify = ref('')
 // 分类列表
 const classifyColumns = ref([])
 
-// 交易类型
-const typeColumns = [
-  { text: '支出', value: 0 },
-  { text: '收入', value: 1 },
-  { text: '不计入收支', value: 2 }
-]
-
 // 周期类型
 const periodicTypeColumns = [
   { text: '每天', value: 0 },
@@ -355,7 +341,6 @@ const form = reactive({
   reason: '',
   amount: '',
   type: 0,
-  typeText: '',
   classify: '',
   periodicType: 0,
   periodicTypeText: '',
@@ -508,7 +493,6 @@ const editPeriodic = (item) => {
   form.reason = item.reason
   form.amount = item.amount.toString()
   form.type = item.type
-  form.typeText = typeColumns.find(t => t.value === item.type)?.text || ''
   form.classify = item.classify
   form.periodicType = item.periodicType
   form.periodicTypeText = periodicTypeColumns.find(t => t.value === item.periodicType)?.text || ''
@@ -593,7 +577,6 @@ const resetForm = () => {
   form.reason = ''
   form.amount = ''
   form.type = 0
-  form.typeText = ''
   form.classify = ''
   form.periodicType = 0
   form.periodicTypeText = ''
@@ -606,17 +589,6 @@ const resetForm = () => {
   form.yearDay = ''
 }
 
-// 选择器确认事件
-const onTypeConfirm = ({ selectedValues, selectedOptions }) => {
-  form.type = selectedValues[0]
-  form.typeText = selectedOptions[0].text
-  showTypePicker.value = false
-  // 清空已选的分类
-  form.classify = ''
-  // 重新加载对应类型的分类列表
-  loadClassifyList(form.type)
-}
-
 const onPeriodicTypeConfirm = ({ selectedValues, selectedOptions }) => {
   form.periodicType = selectedValues[0]
   form.periodicTypeText = selectedOptions[0].text