介绍

此项目的代码用于nextjs-payload项目

项目结构

• src/ui/：对外暴露的基础 UI 组件（按钮、输入等），由 Toolkit 统一维护样式与交互，供其他项目通过 npm/Git 引用。
• src/components/：业务相关的通用组件（如 Media、RichText、Pagination 等），可在多个页面中复用。
• src/components/ui/：仅供 components 内部使用的 UI 组件，不对外暴露，用于支持 src/components/ 下的业务组件。
• src/blocks/：预留给更复杂的组合组件与页面模块，按需扩展。用于 Payload CMS 的内容块系统。
• src/globals/：全局组件，包括导航栏（navbar）和页脚（footer），通常在每个页面中都会使用。
• src/widgets/：小型功能组件（如 FeatureBanner、ProductGrid、SpecificationTable 等），用于特定场景的展示。
• src/collections/：供 Payload CMS 使用的数据集合定义（Catalog、Categories、Media、Pages、Posts、Products、Users 等）。
• src/utils/ 和 src/utilities/：提供样式辅助方法（如 cn）以及其他通用工具函数（如格式化、元数据生成等）。

组件仅接受 props，不访问任何具体数据源，便于在多个项目间共享统一视觉风格。构建后会输出到 dist/，其他项目通过 npm/Git 引用即可，例如：

import { Button } from 'colin-payload-toolkit/ui'

使用说明

项目代码要和tailwind配合使用，在tailwind中必须有以下变量

        'primary-body': ['var(--font-inter)', 'Arial', 'sans-serif'],
        'primary-title': ['var(--font-lora)', 'Arial', 'sans-serif'],

      primary: {
          DEFAULT: '#1b3a4b', // Primary (Soft Navy)
          light: '#6B8A9E', // 浅色变体 (Muted Blue Grey)
          background: '#F4F4F4', // 背景色
          contrast: '#E5E5E5', // 对比色
          text: '#1a1a1a', // 文字色
          highlight: '#5B9BD5', // 悬停色 (Oceanic)
        },

📚 文档

• 维护指南 - 详细的开发、构建和发布流程
• 发布检查清单 - 发布前的快速检查清单