DrPlayer/dashboard/src/stores/pageStateStore.js at c3c2079a15acaebd8b0369ee72e241b9f2b36de3 · hjdhnx/DrPlayer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import { defineStore } from 'pinia';

export const usePageStateStore = defineStore('pageState', {
    state: () => ({
        // 保存各个页面的状态
        pageStates: {
            // Video页面状态
            video: {
                activeKey: '',
                currentPage: 1,
                videos: [],
                hasMore: true,
                loading: false,
                scrollPosition: 0,
                lastUpdateTime: null
            },
            // Home页面状态
            home: {
                scrollPosition: 0,
                lastUpdateTime: null
            },
            // 搜索结果状态
            search: {
                keyword: '',
                currentPage: 1,
                videos: [],
                hasMore: true,
                loading: false,
                scrollPosition: 0,
                lastUpdateTime: null
            }
        }
    }),

    actions: {
        // 保存页面状态
        savePageState(pageName, state) {
            if (!this.pageStates[pageName]) {
                this.pageStates[pageName] = {};
            }

            // 合并状态，保留时间戳
            this.pageStates[pageName] = {
                ...this.pageStates[pageName],
                ...state,
                lastUpdateTime: Date.now()
            };

            console.log(`保存页面状态 [${pageName}]:`, this.pageStates[pageName]);
        },

        // 获取页面状态
        getPageState(pageName) {
            const state = this.pageStates[pageName];
            console.log(`获取页面状态 [${pageName}]:`, state);
            return state || {};
        },

        // 清除页面状态
        clearPageState(pageName) {
            if (this.pageStates[pageName]) {
                this.pageStates[pageName] = {};
                console.log(`清除页面状态 [${pageName}]`);
            }
        },

        // 检查状态是否过期（超过30分钟）
        isStateExpired(pageName, maxAge = 30 * 60 * 1000) {
            const state = this.pageStates[pageName];
            if (!state || !state.lastUpdateTime) {
                return true;
            }
            return Date.now() - state.lastUpdateTime > maxAge;
        },

        // 保存Video页面特定状态
        saveVideoState(activeKey, currentPage, videos, hasMore, loading, scrollPosition = 0) {
            this.savePageState('video', {
                activeKey,
                currentPage,
                videos: [...videos], // 深拷贝数组
                hasMore,
                loading,
                scrollPosition
            });
        },

        // 保存搜索状态
        saveSearchState(keyword, currentPage, videos, hasMore, loading, scrollPosition = 0) {
            this.savePageState('search', {
                keyword,
                currentPage,
                videos: [...videos], // 深拷贝数组
                hasMore,
                loading,
                scrollPosition
            });
        },

        // 保存滚动位置
        saveScrollPosition(pageName, position) {
            if (this.pageStates[pageName]) {
                this.pageStates[pageName].scrollPosition = position;
                this.pageStates[pageName].lastUpdateTime = Date.now();
            }
        },

        // 获取滚动位置
        getScrollPosition(pageName) {
            const state = this.pageStates[pageName];
            return state ? state.scrollPosition || 0 : 0;
        }
    },

    getters: {
        // 获取Video页面状态
        videoState: (state) => state.pageStates.video || {},

        // 获取搜索状态
        searchState: (state) => state.pageStates.search || {},

        // 获取Home页面状态
        homeState: (state) => state.pageStates.home || {}
    }
});