feat(OcrView): 添加图片清理功能

- 在页面中添加清理图片按钮
- 实现日期选择对话框
- 添加确认清理功能，发送请求并显示结果
- 优化页面布局和功能

src/views/OcrView.vue

@@ -12,6 +12,7 @@
                     <ElButton :icon="Search" @click="table.refresh(true)" />
                 </template>
             </ElInput>
+            <ElButton :icon="ClearAll" @click="exportDialog">清理图片</ElButton>
         </template>
         <ElTableColumn prop="id" label="#" width="80" />
         <ElTableColumn prop="channel" label="渠道" width="150" />
@@ -150,19 +151,45 @@
             </div>
         </ElForm>
     </EditDialog>
+
+    <ElDialog v-model="showExportDialog" title="日期选择" width="400px">
+        <div class="block">
+            <el-date-picker
+                v-model="dateValue"
+                type="daterange"
+                unlink-panels
+                range-separator="-"
+                start-placeholder="起始时间"
+                end-placeholder="结束时间"
+                :shortcuts="shortcuts"
+            />
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <ElButton @click="exportDialog()">取 消</ElButton>
+                <ElButton type="primary" @click="confirmExport()">确 定</ElButton>
+            </span>
+        </template>
+    </ElDialog>
 </template>
 <script setup>
 import { inject, ref } from 'vue'
 import PagingTable from '@/components/PagingTable.vue'
 import { useTimeFormatter } from '@/utils/formatter'
-import { Check, Edit, Plus, Search, Refresh, Star, StarOff, Heart, HeartBroken, DropletFilled } from '@vicons/tabler'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { Check, Edit, Plus, Search, Refresh, Star, StarOff, ClearAll } from '@vicons/tabler'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import EditDialog from '@/components/EditDialog.vue'
 import { setupEditDialog } from '@/utils/editDialog'
 import { http } from '@/plugins/http'
 import { useClipboard } from '@vueuse/core'
+import { format } from 'date-fns'
 
-const query = ref({})
+const query = ref({
+    width: 50,
+    height: 50,
+    quality: 50,
+    format: 'jpg'
+})
 const timeFormatter = useTimeFormatter()
 const table = ref(null)
 const model = ref({})
@@ -170,6 +197,47 @@ const { showEditDialog } = setupEditDialog(model)
 const { copy } = useClipboard({ legacy: true })
 const isAdmin = inject('isAdminAndOperator')
 
+const showExportDialog = ref(false)
+const dateValue = ref('')
+const shortcuts = [
+    {
+        text: '当前周',
+        value: () => {
+            const now = new Date()
+            const startOfWeek = new Date(now)
+            startOfWeek.setDate(startOfWeek.getDate() - ((now.getDay() + 6) % 7))
+            return [startOfWeek, now]
+        }
+    },
+    {
+        text: '当前月',
+        value: () => {
+            const now = new Date()
+            const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1)
+            return [startOfMonth, now]
+        }
+    },
+    {
+        text: '上一周',
+        value: () => {
+            const now = new Date()
+            const startOfWeek = new Date(now)
+            startOfWeek.setDate(startOfWeek.getDate() - ((now.getDay() + 6) % 7) - 7)
+            const endOfWeek = new Date(startOfWeek.getTime() + 6 * 24 * 3600 * 1000)
+            return [startOfWeek, endOfWeek]
+        }
+    },
+    {
+        text: '上一月',
+        value: () => {
+            const now = new Date()
+            const startOfMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1)
+            const endOfMonth = new Date(now.getFullYear(), now.getMonth(), 0)
+            return [startOfMonth, endOfMonth]
+        }
+    }
+]
+
 function formatRecord(record) {
     return record
         .split('\n')
@@ -263,4 +331,40 @@ async function handleFavoriteClick(row) {
         ElMessage.error('收藏失败')
     }
 }
+
+function exportDialog() {
+    showExportDialog.value = !showExportDialog.value
+}
+
+async function confirmExport() {
+    if (!dateValue.value) {
+        ElMessage.error('请选择日期')
+        return
+    }
+    const data = {
+        startDate: format(dateValue.value[0], 'yyyy-MM-dd 00:00:00'),
+        endDate: format(dateValue.value[1], 'yyyy-MM-dd 23:59:59')
+    }
+
+    const loading = ElLoading.service({
+        lock: true,
+        text: '正在清理数据...',
+        background: 'rgba(0, 0, 0, 0.7)'
+    })
+
+    try {
+        const res = await http.post('/ocrRecord/imgCleaning', data)
+        loading.close()
+        if (res.success) {
+            ElMessage.success(res.message)
+        } else {
+            ElMessage.error(res.message)
+        }
+    } catch (error) {
+        loading.close()
+        console.error('Error receipt:', error)
+        ElMessage.error('清理数据错误,请稍后再试.', error)
+    }
+    exportDialog()
+}
 </script>