feat: 为统计图表添加默认时间范围本地存储功能
- 在 StatsView 和 AnalyticsVisitView 中新增本地存储功能 - 默认时间范围从 30 天改为 7 天 - 加载页面时从 localStorage 读取保存的选项 - 切换时间范围时自动保存到 localStorage
This commit is contained in:
@@ -202,12 +202,13 @@ const overview = ref<VisitOverviewResponse>({
|
|||||||
const items = ref<VisitPageItem[]>([]);
|
const items = ref<VisitPageItem[]>([]);
|
||||||
const visitTab = ref<"pv" | "latest">("pv");
|
const visitTab = ref<"pv" | "latest">("pv");
|
||||||
const visitTabStorageKey = "cwd-analytics-visit-tab";
|
const visitTabStorageKey = "cwd-analytics-visit-tab";
|
||||||
|
const chartRangeStorageKey = "cwd-analytics-visit-chart-range";
|
||||||
|
|
||||||
const injectedDomainFilter = inject<Ref<string> | null>("domainFilter", null);
|
const injectedDomainFilter = inject<Ref<string> | null>("domainFilter", null);
|
||||||
const domainFilter = injectedDomainFilter ?? ref("");
|
const domainFilter = injectedDomainFilter ?? ref("");
|
||||||
const last30Days = ref<{ date: string; total: number }[]>([]);
|
const last30Days = ref<{ date: string; total: number }[]>([]);
|
||||||
const likeStatsItems = ref<LikeStatsItem[]>([]);
|
const likeStatsItems = ref<LikeStatsItem[]>([]);
|
||||||
const chartRange = ref<"7" | "30">("30");
|
const chartRange = ref<"7" | "30">("7");
|
||||||
|
|
||||||
const toastMessage = ref("");
|
const toastMessage = ref("");
|
||||||
const toastType = ref<"success" | "error">("success");
|
const toastType = ref<"success" | "error">("success");
|
||||||
@@ -318,6 +319,29 @@ function saveVisitTabToStorage(value: "pv" | "latest") {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function loadChartRangeFromStorage() {
|
||||||
|
if (typeof window === "undefined") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const value = window.localStorage.getItem(chartRangeStorageKey);
|
||||||
|
if (value === "7" || value === "30") {
|
||||||
|
chartRange.value = value;
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveChartRangeToStorage(value: "7" | "30") {
|
||||||
|
if (typeof window === "undefined") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
window.localStorage.setItem(chartRangeStorageKey, value);
|
||||||
|
} catch {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function loadData() {
|
async function loadData() {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
listLoading.value = true;
|
listLoading.value = true;
|
||||||
@@ -451,6 +475,7 @@ function changeChartRange(range: "7" | "30") {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
chartRange.value = range;
|
chartRange.value = range;
|
||||||
|
saveChartRangeToStorage(range);
|
||||||
renderChart();
|
renderChart();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -462,6 +487,7 @@ function handleResize() {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadVisitTabFromStorage();
|
loadVisitTabFromStorage();
|
||||||
|
loadChartRangeFromStorage();
|
||||||
loadData();
|
loadData();
|
||||||
window.addEventListener("resize", handleResize);
|
window.addEventListener("resize", handleResize);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -125,7 +125,8 @@ const statsSummary = ref({
|
|||||||
});
|
});
|
||||||
const domainStats = ref<DomainStat[]>([]);
|
const domainStats = ref<DomainStat[]>([]);
|
||||||
const last7Days = ref<{ date: string; total: number }[]>([]);
|
const last7Days = ref<{ date: string; total: number }[]>([]);
|
||||||
const chartRange = ref<"7" | "30">("30");
|
const chartRange = ref<"7" | "30">("7");
|
||||||
|
const chartRangeStorageKey = "cwd-stats-chart-range";
|
||||||
|
|
||||||
const injectedDomainFilter = inject<Ref<string> | null>("domainFilter", null);
|
const injectedDomainFilter = inject<Ref<string> | null>("domainFilter", null);
|
||||||
const domainFilter = injectedDomainFilter ?? ref("");
|
const domainFilter = injectedDomainFilter ?? ref("");
|
||||||
@@ -137,6 +138,29 @@ const toastVisible = ref(false);
|
|||||||
const chartEl = ref<HTMLDivElement | null>(null);
|
const chartEl = ref<HTMLDivElement | null>(null);
|
||||||
let chartInstance: echarts.ECharts | null = null;
|
let chartInstance: echarts.ECharts | null = null;
|
||||||
|
|
||||||
|
function loadChartRangeFromStorage() {
|
||||||
|
if (typeof window === "undefined") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const value = window.localStorage.getItem(chartRangeStorageKey);
|
||||||
|
if (value === "7" || value === "30") {
|
||||||
|
chartRange.value = value;
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveChartRangeToStorage(value: "7" | "30") {
|
||||||
|
if (typeof window === "undefined") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
window.localStorage.setItem(chartRangeStorageKey, value);
|
||||||
|
} catch {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function showToast(msg: string, type: "success" | "error" = "success") {
|
function showToast(msg: string, type: "success" | "error" = "success") {
|
||||||
toastMessage.value = msg;
|
toastMessage.value = msg;
|
||||||
toastType.value = type;
|
toastType.value = type;
|
||||||
@@ -235,6 +259,7 @@ function changeChartRange(range: "7" | "30") {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
chartRange.value = range;
|
chartRange.value = range;
|
||||||
|
saveChartRangeToStorage(range);
|
||||||
renderChart();
|
renderChart();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -245,6 +270,7 @@ function handleResize() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
loadChartRangeFromStorage();
|
||||||
loadStats();
|
loadStats();
|
||||||
window.addEventListener("resize", handleResize);
|
window.addEventListener("resize", handleResize);
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user