Root / src / Dpz.Core.Web / wwwroot / js / member / constants.js
export const CONSTANTS = {
    PAGES: {
        PROFILE: 'profile',
        ARTICLES: 'articles',
        MUMBLES: 'mumbles',
        TIMELINE: 'timeline',
        PHOTOS: 'photos'
    },
    PAGINATION: {
        DEFAULT_PAGE_SIZE: 10,
        DEFAULT_PAGE_NUM: 1,
        MAX_VISIBLE_PAGES: 5
    },
    BREAKPOINTS: {
        MOBILE: 768,
        TABLET: 768,
        DESKTOP: 1024
    },
    DELAYS: {
        LOADING: 300,
        TOAST_AUTO_HIDE: 3000,
        TOAST_HIDE_ANIMATION: 300
    },
    MESSAGE_TYPES: {
        SUCCESS: {
            type: 'success',
            icon: 'fa-check-circle',
            color: '#059669',
            bgColor: '#ffffff',
            borderColor: '#10b981',
            textColor: '#065f46'
        },
        ERROR: {
            type: 'error',
            icon: 'fa-times-circle',
            color: '#dc2626',
            bgColor: '#ffffff',
            borderColor: '#ef4444',
            textColor: '#7f1d1d'
        },
        WARNING: {
            type: 'warning',
            icon: 'fa-exclamation-triangle',
            color: '#d97706',
            bgColor: '#ffffff',
            borderColor: '#f59e0b',
            textColor: '#92400e'
        },
        INFO: {
            type: 'info',
            icon: 'fa-info-circle',
            color: '#2563eb',
            bgColor: '#ffffff',
            borderColor: '#3b82f6',
            textColor: '#1e40af'
        }
    },
    SELECTORS: {
        navItem: '.nav-item',
        navItemLink: '.nav-item a',
        currentPageTitle: '#currentPageTitle',
        menuToggle: '.menu-toggle',
        sidebarOverlay: '.sidebar-overlay',
        memberSidebar: '.member-sidebar',
        photosGrid: '.photos-grid',
        deleteModal: '#deleteModal',
        loadingOverlay: '#loadingOverlay',
        toastContainer: '#toast-container',
        progressOverlay: '#progressOverlay'
    }
};
⚠⚠    以下内容为AI分析的结果，请根据实际情况进行判断。

这是一个导出（ES module）名为 CONSTANTS 的配置对象，集中存放了应用中会复用的静态常量。目的在于统一管理常量、提高可维护性并避免魔法数字/字符串散落在代码各处。下面逐项说明它的含义和典型用途：

总体

  • export const CONSTANTS = { ... }：导出一个常量对象，其他模块可以通过 import { CONSTANTS } from '...' 使用。
  • 注意：const 只是保证变量引用不变，但对象本身可被修改。如果需要不可变，可以用 Object.freeze。

各字段说明

  • PAGES

    • 列出了页面标识符（profile、articles、mumbles、timeline、photos）。通常用于路由、导航高亮、权限判断或作为组件/视图的 key。

  • PAGINATION

    • DEFAULT_PAGE_SIZE: 默认每页条数（10）。
    • DEFAULT_PAGE_NUM: 默认页码（1）。
    • MAX_VISIBLE_PAGES: 分页组件中一次最多显示的页码数量（5）。
    • 用于分页组件的默认值与 UI 行为控制。

  • BREAKPOINTS

    • MOBILE, TABLET, DESKTOP：响应式断点，单位为像素（px）。例如 MOBILE: 768 表示小于 768px 可视为移动端。
    • 注：这里 MOBILE 和 TABLET 都是 768，可能是有意一致，或者需要区分时应修改。

  • DELAYS

    • 定义各种延时（单位毫秒）：LOADING（300ms）、TOAST_AUTO_HIDE（3000ms）、TOAST_HIDE_ANIMATION（300ms）。
    • 用于控制加载指示器、通知自动隐藏以及隐藏动画时长等。

  • MESSAGE_TYPES

    • 为不同类型消息（success、error、warning、info）提供一套样式/元数据：
      • type：类型标识字符串。
      • icon：图标类名（这里看起来是 Font Awesome，如 fa-check-circle）。
      • color, bgColor, borderColor, textColor：用于消息组件的颜色配置（显式给出主色、背景色、边框色和文本色）。
    • 用于 toast/alert 组件统一样式和图标。

  • SELECTORS

    • 一组常用的 DOM/CSS 选择器字符串，如 .nav-item, #loadingOverlay, #toast-container 等。
    • 用于在脚本中查询元素（document.querySelector(CONSTANTS.SELECTORS.navItem)）或在测试中定位元素，避免直接在各处硬编码选择器。

示例（伪代码）

  • 获取默认分页大小：const size = CONSTANTS.PAGINATION.DEFAULT_PAGE_SIZE
  • 显示 success toast：使用 CONSTANTS.MESSAGE_TYPES.SUCCESS.icon 和颜色配置来渲染样式。
  • 响应式判断：if (window.innerWidth < CONSTANTS.BREAKPOINTS.TABLET) { /* 移动端布局 */ }

小建议

  • 如果想保证对象不可变，可在导出前使用 Object.freeze(CONSTANTS) 或对嵌套对象做深冻结。
  • 可考虑把断点以更语义化的命名和单位注释清楚，或使用 TypeScript 定义类型以获得更好提示。
  • 确认 MOBILE 与 TABLET 相同是否符合预期。

如果你需要，我可以帮你把这个常量文件改为不可变形式、转换为 TypeScript 接口，或给出如何在 React/VanillaJS 中使用这些常量的具体示例。