股票信息展示設置功能設計：三種顯示模式的數據庫驅動實現方案

首頁右上角浮動股票信息展示區，需支持「默認顯示」「默認隱藏」「永不顯示」三種模式，且行為隨登錄/頁面切換動態變化。本文給出基於用戶偏好表的數據庫驅動設計方案。

核心需求分析

數據庫設計

CREATE TABLE user_stock_preference (
    user_id BIGINT PRIMARY KEY,
    display_mode TINYINT NOT NULL DEFAULT 0,  -- 0:默認顯示 1:默認隱藏 2:永不顯示
    last_closed_page VARCHAR(100),            -- 記錄用戶手動關閉時所在頁面
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

前端邏輯實現 (Vue/React 通用)

// 1. 獲取用戶偏好 (登錄後/頁面初始化)
async function loadStockPreference() {
    const resp = await api.get('/user/stock-preference');
    return resp.data; // { displayMode: 0, lastClosedPage: null }
}

// 2. 判斷是否顯示
function shouldShowStock(pref, currentPage, isFromLogin) {
    if (pref.displayMode === 2) return false; // 永不顯示
    
    if (isFromLogin) return true; // 登錄進首頁：模式0/1均顯示
    
    // 頁面切換回首頁
    if (pref.displayMode === 1) {
        // 默認隱藏：僅當非從登錄頁進入且用戶未手動打開時隱藏
        // 簡化邏輯：記錄用戶最後關閉頁面，若從同頁返回則隱藏
        return pref.lastClosedPage !== currentPage;
    }
    
    return true; // 默認顯示
}

// 3. 用戶手動關閉
function onUserCloseStock(currentPage) {
    await api.post('/user/stock-preference/close', { page: currentPage });
    // 後端更新 lastClosedPage = currentPage
}

// 4. 設置模式變更
function onModeChange(newMode) {
    await api.put('/user/stock-preference/mode', { mode: newMode });
}

後端接口設計

// GET /user/stock-preference
// PUT /user/stock-preference/mode { mode: 0|1|2 }
// POST /user/stock-preference/close { page: "home|detail|list" }

關鍵狀態流轉圖

[登錄] → 首頁顯示 (模式0/1) / 隱藏 (模式2)
    ↓
[用戶點擊關閉] → 記錄 lastClosedPage=當前頁 → 隱藏浮層
    ↓
[切換到其他頁] → 無影響
    ↓
[切回首頁] → 
    模式0: 顯示
    模式1: 若 lastClosedPage==首頁則隱藏，否則顯示
    模式2: 隱藏
    ↓
[再次登錄] → 重置 lastClosedPage=null → 按模式0/1顯示/模式2隱藏

擴展建議

• 客戶端緩存：偏好數據存入 localStorage，減少接口調用
• 埋點統計：記錄展示/關閉/模式變更事件，優化產品決策
• 漸進式增強：未登錄用戶用 Cookie 臨時存儲偏好，登錄後合併

此方案以數據庫為單一真實源，前端純邏輯判斷，後端輕量 CRUD，滿足複雜顯示規則且易於擴展維護。