feat: add pages

docs/design/portal/GLOBAL.md

@@ -0,0 +1,96 @@
+# 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` (响应式呼吸感)
+- **示例代码**:
+  ```html
+  <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`。<br>Default: `text-slate-600 font-medium`<br>Hover: `text-primary-600`<br>Active: `text-primary-600` |
+| **Center-Right** | **Global Search** | 圆角矩形输入框 `rounded-full` 或 `rounded-lg`。<br>`bg-slate-100 focus:bg-white focus:ring`。<br>宽度：默认 `w-64`，聚焦时可伸展。 |
+| **Right** | **User Actions** | **未登录**: <br>- [登录]: Ghost Button (`text-slate-600 hover:bg-slate-50`)<br>- [注册]: Primary Button (`bg-primary-600 text-white`)<br>**已登录**: <br>- [通知]: Bell Icon + Badge<br>- [头像]: 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**: 标题 + 操作区 (如“查看更多”) 的组合。