From c31c7a88bd695004c99dd54ae6a2419365a20214 Mon Sep 17 00:00:00 2001
From: admin <admin@viaeon.com>
Date: Fri, 8 May 2026 10:10:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BA=91=E7=AB=AF=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95=E9=A1=B5=E9=9D=A2=E7=AD=9B=E9=80=89=E6=94=B9?=
 =?UTF-8?q?=E7=94=A8DateTimePicker=E7=BB=84=E4=BB=B6,=E5=AF=B9=E9=BD=90?=
 =?UTF-8?q?=E8=B4=A2=E5=8A=A1=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 日期选择器从原生input[type=date]改为DateTimePicker组件(带日历和时间选择)
- 添加快捷日期按钮:今天/近7天/本月
- 日期范围使用dateRange对象(from/to)替代独立的startDate/endDate
- 搜索按钮移除,搜索框回车触发
---
 .../admin/cloud-variables/[id]/records.vue    | 61 ++++++++++++++-----
 1 file changed, 45 insertions(+), 16 deletions(-)

diff --git a/frontend/src/pages/admin/cloud-variables/[id]/records.vue b/frontend/src/pages/admin/cloud-variables/[id]/records.vue
index 67d1b23..fc47f92 100644
--- a/frontend/src/pages/admin/cloud-variables/[id]/records.vue
+++ b/frontend/src/pages/admin/cloud-variables/[id]/records.vue
@@ -13,6 +13,7 @@ import DataTable from '@/components/data-table/data-table.vue'
 import { SelectColumn } from '@/components/data-table/table-columns'
 import { generateVueTable } from '@/components/data-table/use-generate-vue-table'
 import DataTableViewOptions from '@/components/data-table/view-options.vue'
+import DateTimePicker from '@/components/ui/date-picker/DateTimePicker.vue'
 import { BasicPage } from '@/components/global-layout'
 import Badge from '@/components/ui/badge/Badge.vue'
 import Button from '@/components/ui/button/Button.vue'
@@ -89,14 +90,36 @@ const records = ref<VariableRecord[]>([])
 const total = ref(0)
 const page = ref(1)
 const pageSize = ref(10)
-const startDate = ref('')
-const endDate = ref('')
+const dateRange = ref<{ from: string, to: string }>({ from: '', to: '' })
 const searchQuery = ref('')
 const selectedIds = ref<number[]>([])
 const deleteDialogOpen = ref(false)
 const deleteTargetId = ref<number | null>(null)
 const batchDeleteDialogOpen = ref(false)
 
+function setQuickRange(range: 'today' | 'week' | 'month') {
+  const now = new Date()
+  const today = now.toISOString().split('T')[0]
+  const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().split('T')[0]
+
+  switch (range) {
+    case 'today':
+      dateRange.value = { from: `${today}T00:00`, to: `${today}T23:59` }
+      break
+    case 'week': {
+      const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
+      dateRange.value = {
+        from: `${weekAgo.toISOString().split('T')[0]}T00:00`,
+        to: `${today}T23:59`,
+      }
+      break
+    }
+    case 'month':
+      dateRange.value = { from: `${firstDayOfMonth}T00:00`, to: `${today}T23:59` }
+      break
+  }
+}
+
 const dynamicKeys = computed(() => {
   const keys = new Set<string>()
   records.value.forEach((record) => {
@@ -278,8 +301,8 @@ async function fetchRecords() {
     const params = new URLSearchParams()
     params.append('page', String(page.value))
     params.append('page_size', String(pageSize.value))
-    if (startDate.value) params.append('start_date', startDate.value)
-    if (endDate.value) params.append('end_date', endDate.value)
+    if (dateRange.value.from) params.append('start_date', dateRange.value.from)
+    if (dateRange.value.to) params.append('end_date', dateRange.value.to)
     if (searchQuery.value) params.append('search', searchQuery.value)
 
     const data = await api.get<{ records: VariableRecord[], total: number }>(`/dev/cloud-variables/${variable.value.id}/records?${params}`)
@@ -447,20 +470,26 @@ onMounted(async () => {
                         @keydown.enter="handleSearch"
                       />
                     </div>
-                    <Input
-                      v-model="startDate"
-                      type="date"
-                      class="h-8 w-[140px]"
+                    <DateTimePicker
+                      v-model="dateRange.from"
+                      :placeholder="t('admin.cloudVariables.records.startDate')"
+                      class="w-[180px]"
                     />
-                    <Input
-                      v-model="endDate"
-                      type="date"
-                      class="h-8 w-[140px]"
+                    <span class="text-muted-foreground text-sm">{{ t('admin.finance.to') }}</span>
+                    <DateTimePicker
+                      v-model="dateRange.to"
+                      :placeholder="t('admin.cloudVariables.records.endDate')"
+                      class="w-[180px]"
                     />
-                    <Button variant="outline" size="sm" class="h-8" @click="handleSearch">
-                      <Search class="h-4 w-4 mr-1" />
-                      {{ t('admin.cloudVariables.records.search') }}
-                    </Button>
+                    <UiButton variant="ghost" size="sm" @click="setQuickRange('today')">
+                      {{ t('admin.finance.today') }}
+                    </UiButton>
+                    <UiButton variant="ghost" size="sm" @click="setQuickRange('week')">
+                      {{ t('admin.finance.last7Days') }}
+                    </UiButton>
+                    <UiButton variant="ghost" size="sm" @click="setQuickRange('month')">
+                      {{ t('admin.finance.thisMonth') }}
+                    </UiButton>
                   </div>
                   <DataTableViewOptions :table="table" :column-labels="columnLabels" />
                 </div>