样式统一

Web/src/views/TransactionsRecord.vue

@@ -29,83 +29,73 @@
     />
 
     <!-- 新增交易记录弹出层 -->
-    <van-popup 
-      v-model:show="addDialogVisible" 
-      position="bottom"
-      :style="{ height: '85%' }"
-      round
-      closeable
+    <PopupContainer
+      v-model="addDialogVisible"
+      title="手动录账单"
+      height="85%"
     >
-      <div class="popup-container">
-        <div class="popup-header-fixed">
-          <h3>手动录账单</h3>
-        </div>
-        
-        <div class="popup-scroll-content">
-        <van-form @submit="onAddSubmit">
-          <van-cell-group inset title="基本信息">
-            <van-field
-              v-model="addForm.occurredAt"
-              is-link
-              readonly
-              name="occurredAt"
-              label="交易时间"
-              placeholder="请选择交易时间"
-              @click="showDateTimePicker = true"
-              :rules="[{ required: true, message: '请选择交易时间' }]"
-            />
-          </van-cell-group>
+      <van-form @submit="onAddSubmit">
+        <van-cell-group inset title="基本信息">
+          <van-field
+            v-model="addForm.occurredAt"
+            is-link
+            readonly
+            name="occurredAt"
+            label="交易时间"
+            placeholder="请选择交易时间"
+            @click="showDateTimePicker = true"
+            :rules="[{ required: true, message: '请选择交易时间' }]"
+          />
+        </van-cell-group>
 
-          <van-cell-group inset title="交易明细">
-            <van-field
-              v-model="addForm.reason"
-              name="reason"
-              label="交易摘要"
-              placeholder="请输入交易摘要"
-              type="textarea"
-              rows="2"
-              autosize
-              maxlength="200"
-              show-word-limit
-            />
-            <van-field
-              v-model="addForm.amount"
-              name="amount"
-              label="交易金额"
-              placeholder="请输入交易金额"
-              type="number"
-              :rules="[{ required: true, message: '请输入交易金额' }]"
-            />
-            <van-field
-              v-model="addForm.typeText"
-              is-link
-              readonly
-              name="type"
-              label="交易类型"
-              placeholder="请选择交易类型"
-              @click="showAddTypePicker = true"
-              :rules="[{ required: true, message: '请选择交易类型' }]"
-            />
-            <van-field
-              v-model="addForm.classify"
-              is-link
-              readonly
-              name="classify"
-              label="交易分类"
-              placeholder="请选择或输入交易分类"
-              @click="showAddClassifyPicker = true"
-            />
-          </van-cell-group>
+        <van-cell-group inset title="交易明细">
+          <van-field
+            v-model="addForm.reason"
+            name="reason"
+            label="交易摘要"
+            placeholder="请输入交易摘要"
+            type="textarea"
+            rows="2"
+            autosize
+            maxlength="200"
+            show-word-limit
+          />
+          <van-field
+            v-model="addForm.amount"
+            name="amount"
+            label="交易金额"
+            placeholder="请输入交易金额"
+            type="number"
+            :rules="[{ required: true, message: '请输入交易金额' }]"
+          />
+          <van-field
+            v-model="addForm.typeText"
+            is-link
+            readonly
+            name="type"
+            label="交易类型"
+            placeholder="请选择交易类型"
+            @click="showAddTypePicker = true"
+            :rules="[{ required: true, message: '请选择交易类型' }]"
+          />
+          <van-field
+            v-model="addForm.classify"
+            is-link
+            readonly
+            name="classify"
+            label="交易分类"
+            placeholder="请选择或输入交易分类"
+            @click="showAddClassifyPicker = true"
+          />
+        </van-cell-group>
 
-          <div style="margin: 16px;">
-            <van-button round block type="primary" native-type="submit" :loading="addSubmitting">
-              确认添加
-            </van-button>
-          </div>
-        </van-form>
+        <div style="margin: 16px;">
+          <van-button round block type="primary" native-type="submit" :loading="addSubmitting">
+            确认添加
+          </van-button>
         </div>
-      </div>
-    </van-popup>
+      </van-form>
+    </PopupContainer>
 
     <!-- 新增交易 - 日期时间选择器 -->
     <van-popup v-model:show="showDateTimePicker" position="bottom" round>
@@ -182,6 +172,7 @@ import {
 import { getCategoryList, createCategory } from '@/api/transactionCategory'
 import TransactionList from '@/components/TransactionList.vue'
 import TransactionDetail from '@/components/TransactionDetail.vue'
+import PopupContainer from '@/components/PopupContainer.vue'
 
 const transactionList = ref([])
 const loading = ref(false)