大量的代码格式化

Web/src/views/PeriodicRecord.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="page-container-flex periodic-record">
-    <van-nav-bar 
-      :title="navTitle" 
+    <van-nav-bar
+      :title="navTitle"
       left-text="返回"
       left-arrow
-      placeholder 
+      placeholder
       @click-left="handleBack"
     />
 
@@ -36,11 +36,14 @@
                 </template>
               </van-cell>
               <van-cell title="分类" :value="item.classify || '未分类'" />
-              <van-cell title="下次执行时间" :value="formatDateTime(item.nextExecuteTime) || '未设置'" />
+              <van-cell
+                title="下次执行时间"
+                :value="formatDateTime(item.nextExecuteTime) || '未设置'"
+              />
               <van-cell title="状态">
                 <template #value>
-                  <van-switch 
-                    :model-value="item.isEnabled" 
+                  <van-switch
+                    :model-value="item.isEnabled"
                     size="20px"
                     @update:model-value="(val) => toggleEnabled(item.id, val)"
                     @click.stop
@@ -49,9 +52,9 @@
               </van-cell>
             </div>
             <template #right>
-              <van-button 
+              <van-button
                 square
-                type="danger" 
+                type="danger"
                 text="删除"
                 class="delete-button"
                 @click="deletePeriodic(item)"
@@ -61,26 +64,20 @@
         </van-cell-group>
 
         <!-- 空状态 -->
-        <van-empty 
-          v-if="!loading && !periodicList.length" 
+        <van-empty
+          v-if="!loading && !periodicList.length"
           description="暂无周期性账单"
           image="search"
         />
       </van-list>
 
       <!-- 底部安全距离 -->
-      <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
+      <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))" />
     </van-pull-refresh>
 
     <!-- 底部新增按钮 -->
     <div class="bottom-button">
-      <van-button 
-        type="primary" 
-        size="large" 
-        round 
-        icon="plus"
-        @click="openAddDialog"
-      >
+      <van-button type="primary" size="large" round icon="plus" @click="openAddDialog">
         新增周期账单
       </van-button>
     </div>
@@ -93,111 +90,104 @@
     >
       <van-form>
         <van-cell-group inset title="周期设置">
-            <van-field
-              v-model="form.periodicTypeText"
-              is-link
-              readonly
-              name="periodicType"
-              label="周期"
-              placeholder="请选择周期类型"
-              :rules="[{ required: true, message: '请选择周期类型' }]"
-              @click="showPeriodicTypePicker = true"
-            />
+          <van-field
+            v-model="form.periodicTypeText"
+            is-link
+            readonly
+            name="periodicType"
+            label="周期"
+            placeholder="请选择周期类型"
+            :rules="[{ required: true, message: '请选择周期类型' }]"
+            @click="showPeriodicTypePicker = true"
+          />
 
-            <!-- 每周配置 -->
-            <van-field
-              v-if="form.periodicType === 1"
-              v-model="form.weekdaysText"
-              is-link
-              readonly
-              name="weekdays"
-              label="星期"
-              placeholder="请选择星期几"
-              :rules="[{ required: true, message: '请选择星期几' }]"
-              @click="showWeekdaysPicker = true"
-            />
+          <!-- 每周配置 -->
+          <van-field
+            v-if="form.periodicType === 1"
+            v-model="form.weekdaysText"
+            is-link
+            readonly
+            name="weekdays"
+            label="星期"
+            placeholder="请选择星期几"
+            :rules="[{ required: true, message: '请选择星期几' }]"
+            @click="showWeekdaysPicker = true"
+          />
 
-            <!-- 每月配置 -->
-            <van-field
-              v-if="form.periodicType === 2"
-              v-model="form.monthDaysText"
-              is-link
-              readonly
-              name="monthDays"
-              label="日期"
-              placeholder="请选择每月的日期"
-              :rules="[{ required: true, message: '请选择日期' }]"
-              @click="showMonthDaysPicker = true"
-            />
+          <!-- 每月配置 -->
+          <van-field
+            v-if="form.periodicType === 2"
+            v-model="form.monthDaysText"
+            is-link
+            readonly
+            name="monthDays"
+            label="日期"
+            placeholder="请选择每月的日期"
+            :rules="[{ required: true, message: '请选择日期' }]"
+            @click="showMonthDaysPicker = true"
+          />
 
-            <!-- 每季度配置 -->
-            <van-field
-              v-if="form.periodicType === 3"
-              v-model="form.quarterDay"
-              name="quarterDay"
-              label="季度第几天"
-              placeholder="请输入季度开始后第几天"
-              type="number"
-              :rules="[{ required: true, message: '请输入季度开始后第几天' }]"
-            />
+          <!-- 每季度配置 -->
+          <van-field
+            v-if="form.periodicType === 3"
+            v-model="form.quarterDay"
+            name="quarterDay"
+            label="季度第几天"
+            placeholder="请输入季度开始后第几天"
+            type="number"
+            :rules="[{ required: true, message: '请输入季度开始后第几天' }]"
+          />
 
-            <!-- 每年配置 -->
-            <van-field
-              v-if="form.periodicType === 4"
-              v-model="form.yearDay"
-              name="yearDay"
-              label="年第几天"
-              placeholder="请输入年开始后第几天"
-              type="number"
-              :rules="[{ required: true, message: '请输入年开始后第几天' }]"
-            />
+          <!-- 每年配置 -->
+          <van-field
+            v-if="form.periodicType === 4"
+            v-model="form.yearDay"
+            name="yearDay"
+            label="年第几天"
+            placeholder="请输入年开始后第几天"
+            type="number"
+            :rules="[{ required: true, message: '请输入年开始后第几天' }]"
+          />
         </van-cell-group>
 
         <van-cell-group inset title="基本信息">
-            <van-field
-              v-model="form.reason"
-              name="reason"
-              label="摘要"
-              placeholder="请输入交易摘要"
-              type="textarea"
-              rows="2"
-              autosize
-              maxlength="200"
-              show-word-limit
-            />
-            <van-field
-              v-model="form.amount"
-              name="amount"
-              label="金额"
-              placeholder="请输入金额"
-              type="number"
-              :rules="[{ required: true, message: '请输入金额' }]"
-            />
-            <van-field
-              v-model="form.type"
-              name="type"
-              label="类型"
-            >
-              <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: var(--van-gray-5);">请选择交易分类</span>
-                <span v-else>{{ form.classify }}</span>
-              </template>
-            </van-field>
-            
-            <!-- 分类选择组件 -->
-            <ClassifySelector
-              v-model="form.classify"
-              :type="form.type"
-            />
+          <van-field
+            v-model="form.reason"
+            name="reason"
+            label="摘要"
+            placeholder="请输入交易摘要"
+            type="textarea"
+            rows="2"
+            autosize
+            maxlength="200"
+            show-word-limit
+          />
+          <van-field
+            v-model="form.amount"
+            name="amount"
+            label="金额"
+            placeholder="请输入金额"
+            type="number"
+            :rules="[{ required: true, message: '请输入金额' }]"
+          />
+          <van-field v-model="form.type" name="type" label="类型">
+            <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: var(--van-gray-5)">请选择交易分类</span>
+              <span v-else>{{ form.classify }}</span>
+            </template>
+          </van-field>
+
+          <!-- 分类选择组件 -->
+          <ClassifySelector v-model="form.classify" :type="form.type" />
         </van-cell-group>
       </van-form>
       <template #footer>
@@ -240,8 +230,8 @@
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast, showConfirmDialog } from 'vant'
-import { 
-  getPeriodicList, 
+import {
+  getPeriodicList,
   deletePeriodic as deletePeriodicApi,
   togglePeriodicEnabled
 } from '@/api/transactionPeriodic'
@@ -330,19 +320,19 @@ const loadData = async (isRefresh = false) => {
       pageIndex: pageIndex.value,
       pageSize: pageSize
     }
-    
+
     const response = await getPeriodicList(params)
-    
+
     if (response.success) {
       const newList = response.data || []
       total.value = response.total || 0
-      
+
       if (isRefresh) {
         periodicList.value = newList
       } else {
         periodicList.value = [...periodicList.value, ...newList]
       }
-      
+
       if (newList.length === 0 || newList.length < pageSize) {
         finished.value = true
       } else {
@@ -387,27 +377,29 @@ const getPeriodicTypeText = (item) => {
     3: '每季度',
     4: '每年'
   }
-  
+
   let text = typeMap[item.periodicType] || '未知'
-  
+
   if (item.periodicConfig) {
     switch (item.periodicType) {
-      case 1: // 每周
-        { 
-          const weekdays = item.periodicConfig.split(',').map(
-            d => {
-              const dayMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
-              return dayMap[parseInt(d)] || ''
-            }).join('、')
-          text += ` (${weekdays})`
-          break 
-        }
-      case 2: // 每月
-        { 
-          const days = item.periodicConfig.split(',').join('、')
-          text += ` (${days}日)`
-          break 
-        }
+      case 1: {
+        // 每周
+        const weekdays = item.periodicConfig
+          .split(',')
+          .map((d) => {
+            const dayMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+            return dayMap[parseInt(d)] || ''
+          })
+          .join('、')
+        text += ` (${weekdays})`
+        break
+      }
+      case 2: {
+        // 每月
+        const days = item.periodicConfig.split(',').join('、')
+        text += ` (${days}日)`
+        break
+      }
       case 3: // 每季度
         text += ` (第${item.periodicConfig}天)`
         break
@@ -416,7 +408,7 @@ const getPeriodicTypeText = (item) => {
         break
     }
   }
-  
+
   return text
 }
 
@@ -436,20 +428,22 @@ const editPeriodic = (item) => {
   form.type = item.type
   form.classify = item.classify
   form.periodicType = item.periodicType
-  form.periodicTypeText = periodicTypeColumns.find(t => t.value === item.periodicType)?.text || ''
-  
+  form.periodicTypeText = periodicTypeColumns.find((t) => t.value === item.periodicType)?.text || ''
+
   // 解析周期配置
   if (item.periodicConfig) {
     switch (item.periodicType) {
       case 1: // 每周
-        form.weekdays = item.periodicConfig.split(',').map(d => parseInt(d))
-        form.weekdaysText = form.weekdays.map(d => {
-          return weekdaysColumns.find(w => w.value === d)?.text || ''
-        }).join('、')
+        form.weekdays = item.periodicConfig.split(',').map((d) => parseInt(d))
+        form.weekdaysText = form.weekdays
+          .map((d) => {
+            return weekdaysColumns.find((w) => w.value === d)?.text || ''
+          })
+          .join('、')
         break
       case 2: // 每月
-        form.monthDays = item.periodicConfig.split(',').map(d => parseInt(d))
-        form.monthDaysText = form.monthDays.map(d => `${d}日`).join('、')
+        form.monthDays = item.periodicConfig.split(',').map((d) => parseInt(d))
+        form.monthDaysText = form.monthDays.map((d) => `${d}日`).join('、')
         break
       case 3: // 每季度
         form.quarterDay = item.periodicConfig
@@ -459,7 +453,7 @@ const editPeriodic = (item) => {
         break
     }
   }
-  
+
   dialogVisible.value = true
 }
 
@@ -468,7 +462,7 @@ const deletePeriodic = async (item) => {
   try {
     await showConfirmDialog({
       title: '提示',
-      message: '确定要删除这条周期性账单吗？',
+      message: '确定要删除这条周期性账单吗？'
     })
 
     const response = await deletePeriodicApi(item.id)
@@ -493,7 +487,7 @@ const toggleEnabled = async (id, enabled) => {
     if (response.success) {
       showToast(enabled ? '已启用' : '已禁用')
       // 更新本地数据
-      const item = periodicList.value.find(p => p.id === id)
+      const item = periodicList.value.find((p) => p.id === id)
       if (item) {
         item.isEnabled = enabled
       }
@@ -510,7 +504,9 @@ const toggleEnabled = async (id, enabled) => {
 }
 
 const formatDateTime = (date) => {
-  if (!date) return ''
+  if (!date) {
+    return ''
+  }
 
   return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
 }
@@ -557,7 +553,6 @@ const onMonthDaysConfirm = ({ selectedValues, selectedOptions }) => {
   form.monthDaysText = selectedOptions[0].text
   showMonthDaysPicker.value = false
 }
-
 </script>
 
 <style scoped>
@@ -599,5 +594,4 @@ const onMonthDaysConfirm = ({ selectedValues, selectedOptions }) => {
 :deep(.van-nav-bar) {
   background: transparent !important;
 }
-
 </style>