refactor: ♻️ 优化访问趋势时间范围计算方式

src/views/dashboard/components/VisitTrend.vue

@@ -16,9 +16,9 @@
           </el-tooltip>
         </div>
 
-        <el-radio-group v-model="dataRange" size="small" @change="handleDateRangeChange">
-          <el-radio-button label="近7天" :value="1" />
-          <el-radio-button label="近30天" :value="2" />
+        <el-radio-group v-model="recentDaysRange" size="small" @change="handleDateRangeChange">
+          <el-radio-button label="近7天" :value="7" />
+          <el-radio-button label="近30天" :value="30" />
         </el-radio-group>
       </div>
     </template>
@@ -29,9 +29,12 @@
 
 <script setup lang="ts">
 import * as echarts from "echarts";
-import LogAPI, { VisitTrendVO, VisitTrendQuery } from "@/api/system/log";
+import LogAPI, { VisitTrendVO } from "@/api/system/log";
+import { dayjs } from "element-plus";
 
-const dataRange = ref(1);
+// 日期范围
+const recentDaysRange = ref(7);
+// 图表对象
 const chart: Ref<echarts.ECharts | null> = ref(null);
 
 const props = defineProps({
@@ -125,46 +128,29 @@ const setChartOptions = (data: VisitTrendVO) => {
   chart.value.setOption(options);
 };
 
-/** 计算起止时间范围 */
-const calculateDateRange = () => {
-  const now = new Date();
+// 加载数据
+const loadData = () => {
+  const endDate = new Date();
+  const startDate = dayjs()
+    .subtract(recentDaysRange.value - 1, "day")
+    .toDate();
 
-  const endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-
-  const days = dataRange.value === 1 ? 7 : 30;
-  const startDate = new Date(endDate);
-  startDate.setDate(startDate.getDate() - days);
-
-  // 手动调整日期为当地时间的 23:59:59
-  const adjustDateToLocal = (date: Date) => {
-    date.setHours(23, 59, 59, 999);
-    return date;
+  const visitTrendQuery = {
+    startDate: dayjs(startDate).format("YYYY-MM-DD"),
+    endDate: dayjs(endDate).format("YYYY-MM-DD"),
   };
 
-  const adjustedEndDate = adjustDateToLocal(new Date(endDate));
-  const adjustedStartDate = adjustDateToLocal(new Date(startDate));
-  const formattedStartDate = adjustedStartDate.toISOString().split("T")[0];
-  const formattedEndDate = adjustedEndDate.toISOString().split("T")[0];
-
-  return { startDate: formattedStartDate, endDate: formattedEndDate };
-};
-
-/** 加载数据 */
-const loadData = () => {
-  const { startDate, endDate } = calculateDateRange();
-  LogAPI.getVisitTrend({
-    startDate,
-    endDate,
-  } as VisitTrendQuery).then((data) => {
+  LogAPI.getVisitTrend(visitTrendQuery).then((data) => {
     setChartOptions(data);
   });
 };
 
+// 日期范围变化
 const handleDateRangeChange = () => {
   loadData();
 };
 
-/** 下载图表 */
+// 下载图表
 const handleDownloadChart = () => {
   if (!chart.value) {
     return;
@@ -195,7 +181,7 @@ const handleDownloadChart = () => {
   };
 };
 
-/** 窗口大小变化时，重置图表大小 */
+// 窗口大小变化时，重置图表大小
 const handleResize = () => {
   setTimeout(() => {
     if (chart.value) {
@@ -203,7 +189,8 @@ const handleResize = () => {
     }
   }, 100);
 };
-/** 初始化图表  */
+
+// 初始化图表
 onMounted(() => {
   chart.value = markRaw(echarts.init(document.getElementById(props.id) as HTMLDivElement));
   loadData();