feat：添加时间筛选

.env.development

@@ -2,4 +2,5 @@
 # VITE_API_HOST82=https://ad.44a5c8109e4.com
 #VITE_API_HOST82=http://103.158.191.66:9300
 VITE_API_HOST82=http://192.168.0.25:9300
+#VITE_API_HOST82=http://192.168.0.22:9300
 VITE_API_HOST80=https://secure.44a5c8109e4.com

src/components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     NCard: typeof import('naive-ui')['NCard']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NEmpty: typeof import('naive-ui')['NEmpty']

src/locales/en-US.ts

@@ -43,6 +43,8 @@ export default {
     boolNo: 'No',
     filterAll: 'All',
     filterReset: 'Reset',
+    filterStartTime: 'Start time',
+    filterEndTime: 'End time',
     status_unconfirmed: 'Unconfirmed',
     status_confirming: 'Confirming',
     status_confirmed: 'Confirmed',

src/locales/zh-CN.ts

@@ -39,6 +39,8 @@ export default {
     boolNo: '否',
     filterAll: '全部',
     filterReset: '重置',
+    filterStartTime: '开始时间',
+    filterEndTime: '结束时间',
     status_unconfirmed: '未确认',
     status_confirming: '确认中',
     status_confirmed: '已确认',

src/service/vault.ts

@@ -14,6 +14,8 @@ export interface FetchVaultTransactionsBody {
   recipientLabel?: string | null
   senderAddress?: string | null
   recipientAddress?: string | null
+  startTime?: string | null
+  endTime?: string | null
   /** 页码，从 1 开始 */
   page?: {
     current?: number
@@ -32,10 +34,8 @@ function buildVaultTransactionsPayload(body: FetchVaultTransactionsBody): Record
     payload.senderAddress = body.senderAddress
   if (body.recipientAddress != null && String(body.recipientAddress).trim() !== '')
     payload.recipientAddress = body.recipientAddress
-  // if (body.senderIsVaultAddress != null && String(body.senderIsVaultAddress).trim() !== '')
-  //   payload.senderIsVaultAddress = body.senderIsVaultAddress
-  // if (body.recipientIsVaultAddress != null && String(body.recipientIsVaultAddress).trim() !== '')
-  //   payload.recipientIsVaultAddress = body.recipientIsVaultAddress
+  if (body.startTime != null) payload.startTime = body.startTime
+  if (body.endTime != null) payload.endTime = body.endTime
   if (body.page != null) payload.page = body.page
   return payload
 }

src/views/Vault/vaultList.vue

@@ -38,11 +38,13 @@ const filters = reactive<{
   recipientLabel: string | null
   senderAddress: string | null
   recipientAddress: string | null
+  timeRange: [number, number] | null
 }>({
   senderLabel: null,
   recipientLabel: null,
   senderAddress: null,
   recipientAddress: null,
+  timeRange: null,
 })
 
 function formatDash(v: unknown): string {
@@ -276,12 +278,26 @@ async function load(): Promise<void> {
   }
   loading.value = true
   try {
+    let startTime: string | null = null
+    let endTime: string | null = null
+    if (filters.timeRange?.[0] != null) {
+      const d = new Date(filters.timeRange[0])
+      const pad = (n: number) => String(n).padStart(2, '0')
+      startTime = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} 00:00:00`
+    }
+    if (filters.timeRange?.[1] != null) {
+      const d = new Date(filters.timeRange[1])
+      const pad = (n: number) => String(n).padStart(2, '0')
+      endTime = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} 23:59:59`
+    }
     const res = await fetchVaultTransactions({
       vaultId: vault.currentVaultId,
       senderLabel: filters.senderLabel,
       recipientLabel: filters.recipientLabel,
       senderAddress: filters.senderAddress,
       recipientAddress: filters.recipientAddress,
+      startTime,
+      endTime,
       // senderIsVaultAddress: filters.senderIsVaultAddress,
       // recipientIsVaultAddress: filters.recipientIsVaultAddress,
       page: {
@@ -315,7 +331,7 @@ watch(
 )
 
 watch(
-  () => [filters.senderLabel, filters.recipientLabel, filters.senderAddress, filters.recipientAddress],
+  () => [filters.senderLabel, filters.recipientLabel, filters.senderAddress, filters.recipientAddress, filters.timeRange],
   () => {
     pagination.page = 1
     void load()
@@ -340,12 +356,26 @@ async function onExport(): Promise<void> {
   if (vault.currentVaultId == null) return
   exporting.value = true
   try {
+    let startTime: string | null = null
+    let endTime: string | null = null
+    if (filters.timeRange?.[0] != null) {
+      const d = new Date(filters.timeRange[0])
+      const pad = (n: number) => String(n).padStart(2, '0')
+      startTime = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} 00:00:00`
+    }
+    if (filters.timeRange?.[1] != null) {
+      const d = new Date(filters.timeRange[1])
+      const pad = (n: number) => String(n).padStart(2, '0')
+      endTime = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} 23:59:59`
+    }
     const res = await exportVaultTransactions({
       vaultId: vault.currentVaultId,
       senderLabel: filters.senderLabel,
       recipientLabel: filters.recipientLabel,
       senderAddress: filters.senderAddress,
       recipientAddress: filters.recipientAddress,
+      startTime,
+      endTime,
       // senderIsVaultAddress: filters.senderIsVaultAddress,
       // recipientIsVaultAddress: filters.recipientIsVaultAddress,
       page: {
@@ -372,6 +402,7 @@ function onResetFilters(): void {
   filters.recipientLabel = null
   filters.senderAddress = null
   filters.recipientAddress = null
+  filters.timeRange = null
   // filters.senderIsVaultAddress = null
   // filters.recipientIsVaultAddress = null
 }
@@ -424,6 +455,14 @@ function onResetFilters(): void {
                 clearable
                 style="width: 260px"
               />
+              <n-date-picker
+                v-model:value="filters.timeRange"
+                type="daterange"
+                clearable
+                :start-placeholder="t('vaultTx.filterStartTime')"
+                :end-placeholder="t('vaultTx.filterEndTime')"
+                style="width: 420px"
+              />
 <!--              <n-select-->
 <!--                v-model:value="filters.senderIsVaultAddress"-->
 <!--                :options="boolFilterOptions"-->
@@ -440,7 +479,7 @@ function onResetFilters(): void {
 <!--              />-->
               <n-button tertiary @click="onResetFilters">{{ t('vaultTx.filterReset') }}</n-button>
             </div>
-            <n-button type="primary" secondary :loading="exporting" @click="onExport">
+            <n-button class="vault-panel__export" type="primary" secondary :loading="exporting" @click="onExport">
               {{ t('vaultTx.export') }}
             </n-button>
           </div>
@@ -504,7 +543,7 @@ function onResetFilters(): void {
   min-height: 0;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow-y: scroll;
   padding: 15px !important;
   box-sizing: border-box;
 }
@@ -597,7 +636,7 @@ function onResetFilters(): void {
   justify-content: space-between;
   align-items: center;
   gap: 10px;
-  flex-wrap: wrap;
+  //flex-wrap: wrap;
   padding: 0 14px 10px;
   box-sizing: border-box;
 }
@@ -609,6 +648,9 @@ function onResetFilters(): void {
   gap: 10px;
   min-width: 0;
 }
+.vault-panel__export{
+  align-self: flex-start;
+}
 
 .vault-panel__table-frame {
   flex: 0 0 auto;