quyun-v2/docs/design/portal/GLOBAL.md

Portal 全局设计准则 (Global Design Guidelines)

适用范围: PC 端 Portal 站点 核心风格: 内容型（浅灰背景 + 白色卡片），强调信息层级与阅读体验。

1. 全局布局 (Layout & Container)

采用经典的垂直分布布局，确保内容区域聚焦且具备良好的扩展性。

1.1 页面结构 (DOM Structure)

• Root: min-h-screen flex flex-col bg-slate-50 (浅灰背景，hex: #F8FAFC)
  • Header: fixed top-0 w-full z-50 (固定顶部)
  • Main: flex-grow pt-16 (内容自适应填充，顶部留出 Header 高度)
  • Footer: mt-auto (页脚沉底)

1.2 核心容器 (Main Container)

所有页面核心内容需包裹在标准容器内，以保证视觉统一。

• 宽度限制: max-w-screen-xl (Tailwind default: 1280px)
• 对齐方式: mx-auto (水平居中)
• 内边距: px-4 sm:px-6 lg:px-8 (响应式呼吸感)
• 示例代码:

  <main class="flex-grow pt-16">
    <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8">
      <!-- Page Content Here -->
    </div>
  </main>
  

1.3 基础色彩规范 (Basic Colors)

• 背景色: bg-slate-50 (页面底色)
• 卡片色: bg-white (内容承载)
• 边框色: border-slate-200 (轻微分割线)
• 文字色:
  • 主要: text-slate-900 (标题、正文)
  • 次要: text-slate-500 (描述、辅助信息)
  • 链接: text-primary-600 hover:text-primary-700

---

2. 顶部导航栏 (TopNavbar)

全局常驻入口，承载品牌认知与核心路径导航。

2.1 外观 (Appearance)

• 尺寸: 高度 h-16 (64px)
• 背景: bg-white (纯白背景)
• 质感: border-b border-slate-200 或 shadow-sm (轻微投影，提升层级)

2.2 布局 (Flex Grid)

flex items-center justify-between + Container

区域	元素	交互/样式
Left	Logo	图片/SVG + 文字，点击回首页 (/)。高度控制在 32-40px。
Center-Left	Nav Links	首页、分类、标签等。间距 space-x-8。 Default: text-slate-600 font-medium Hover: text-primary-600 Active: text-primary-600
Center-Right	Global Search	圆角矩形输入框 rounded-full 或 rounded-lg。 bg-slate-100 focus:bg-white focus:ring。 宽度：默认 w-64，聚焦时可伸展。
Right	User Actions	未登录: - [登录]: Ghost Button (text-slate-600 hover:bg-slate-50) - [注册]: Primary Button (bg-primary-600 text-white) 已登录: - [通知]: Bell Icon + Badge - [头像]: Avatar + Dropdown Menu

---

3. 页脚 (Footer)

全局底部信息区，采用深色风格以稳定视觉重心。

3.1 外观 (Appearance)

• 背景: bg-slate-900 (深色)
• 文字: text-slate-400 (灰色文本，避免纯白刺眼)
• 链接: Hover 时变亮 hover:text-white

3.2 内容结构

• Upper Section (Links): py-12
  • Grid 布局 (3-4 列)
  • 栏目：关于我们、帮助中心、法律条款、关注我们 (Social Icons)
• Bottom Section (Copyright): border-t border-slate-800 py-6
  • 版权声明 (© 2025 Quyun)
  • ICP 备案号 / 公安网备

---

4. 通用 UI 元素 (Common Components)

4.1 内容卡片 (Content Card)

用于承载列表项、详情块等。

• 样式: bg-white rounded-lg border border-slate-100 shadow-sm transition-shadow hover:shadow-md
• 内边距: p-4 或 p-6

4.2 按钮 (Buttons)

• Primary: bg-primary-600 text-white hover:bg-primary-700 rounded-lg px-4 py-2
• Secondary/Outline: border border-slate-300 text-slate-700 hover:bg-slate-50 rounded-lg px-4 py-2
• Ghost: text-slate-600 hover:bg-slate-100 rounded-lg px-4 py-2

4.3 标题 (Typography)

• H1 (页面主标题): text-2xl sm:text-3xl font-bold text-slate-900
• H2 (区块标题): text-xl font-semibold text-slate-900 mb-4
• Section Header: 标题 + 操作区 (如“查看更多”) 的组合。