Sink/app/components/dashboard/Index.vue
wudi 7cadbfe2b1 refactor: Migrate project files and directories to the app directory using the new compatibilityVersion: 4 feature
- Moved `app.config.ts` to the `app` directory
- Migrated `.vue` files and other assets to the `app` directory
- Updated import paths to reflect the new file locations
2025-03-24 11:05:59 +08:00

81 lines
1.8 KiB
Vue

<script setup>
import { now } from '@internationalized/date'
import { useUrlSearchParams } from '@vueuse/core'
import { safeDestr } from 'destr'
defineProps({
link: {
type: Object,
default: () => null,
},
})
const searchParams = useUrlSearchParams('history')
const time = ref({
startAt: date2unix(now().subtract({ days: 7 })),
endAt: date2unix(now()),
})
provide('time', time)
function changeDate(dateRange) {
console.log('changeDate', dateRange)
// console.log('dashboard date', new Date(time[0] * 1000), new Date(time[1] * 1000))
time.value.startAt = dateRange[0]
time.value.endAt = dateRange[1]
searchParams.time = JSON.stringify(time.value)
}
const filters = ref({})
provide('filters', filters)
function changeFilter(type, value) {
console.log('changeFilter', type, value)
filters.value[type] = value
searchParams.filters = JSON.stringify(filters.value)
}
function restoreSearchParams() {
try {
if (searchParams.time) {
time.value = safeDestr(searchParams.time)
}
if (searchParams.filters) {
filters.value = safeDestr(searchParams.filters)
}
}
catch (error) {
console.error('restore searchParams error', error)
}
}
onBeforeMount(() => {
restoreSearchParams()
})
</script>
<template>
<main class="space-y-6">
<div class="flex flex-col gap-6 sm:gap-2 sm:flex-row sm:justify-between">
<DashboardNav class="flex-1">
<template
v-if="link"
#left
>
<h3 class="text-xl font-bold leading-10">
{{ link.slug }} {{ $t('dashboard.stats') }}
</h3>
</template>
<DashboardDatePicker @update:date-range="changeDate" />
</DashboardNav>
<DashboardFilters v-if="!link" @change="changeFilter" />
</div>
<DashboardCounters />
<DashboardViews />
<DashboardMetrics />
</main>
</template>