First Commit

2026-03-25 14:15:04 +08:00
commit 134d84d933
84 changed files with 25878 additions and 0 deletions
--- a/有维项目/.qoder/repowiki/zh/content/用户界面设计/仪表盘布局/内容区域布局.md
+++ b/有维项目/.qoder/repowiki/zh/content/用户界面设计/仪表盘布局/内容区域布局.md
@@ -0,0 +1,364 @@
+# 内容区域布局
+
+<cite>
+**本文引用的文件**
+- [index.html](file://index.html)
+</cite>
+
+## 目录
+1. [简介](#简介)
+2. [项目结构](#项目结构)
+3. [核心组件](#核心组件)
+4. [架构总览](#架构总览)
+5. [详细组件分析](#详细组件分析)
+6. [依赖关系分析](#依赖关系分析)
+7. [性能考量](#性能考量)
+8. [故障排查指南](#故障排查指南)
+9. [结论](#结论)
+10. [附录](#附录)
+
+## 简介
+本文件面向UI设计师与前端开发者，系统梳理“有维项目”的内容区域布局设计与实现，重点解析：
+- 内容卡片网格系统的实现原理与响应式策略
+- 功能卡片、项目卡片、列表卡片的布局规范与交互设计
+- 内容区域的排版系统、间距控制与对齐规则
+- 响应式断点、移动端适配与触摸交互优化
+- 卡片样式定制指南、主题配置与尺寸调整方案
+- 可访问性设计、字体排版与色彩对比度考虑
+
+## 项目结构
+本项目采用单页应用（SPA）结构，通过页面切换与标签页切换组织内容区域。核心结构如下：
+- 页面容器：登录页、仪表盘页、AI智能体页
+- 仪表盘页包含导航栏、Tab导航与多个内容区（概览、教育、AI工具、校友、会员）
+- AI智能体页包含导航栏、搜索与筛选、卡片网格
+- 全局样式通过CSS变量统一主题色与阴影，配合媒体查询实现响应式
+
+```mermaid
+graph TB
+A["index.html"] --> B["登录页(login-page)"]
+A --> C["仪表盘页(dashboard-page)"]
+A --> D["AI智能体页(ai-page)"]
+C --> E["导航栏(navbar)"]
+C --> F["Tab导航(tab-nav)"]
+C --> G["概览内容区(tab-content#overview)"]
+C --> H["教育内容区(tab-content#education)"]
+C --> I["AI工具内容区(tab-content#ai-tools)"]
+C --> J["校友内容区(tab-content#alumni)"]
+C --> K["会员内容区(tab-content#membership)"]
+D --> L["导航栏(navbar)"]
+D --> M["搜索与筛选(ai-header/industry-filter)"]
+D --> N["AI卡片网格(ai-grid)"]
+```
+
+图表来源
+- [index.html](file://index.html)
+
+章节来源
+- [index.html](file://index.html)
+
+## 核心组件
+本节聚焦内容区域的关键组件及其职责：
+- 页面容器与切换：通过类名切换实现页面显示隐藏与动画过渡
+- 导航与Tab：主导航与内容区Tab切换，统一交互与视觉反馈
+- 卡片网格系统：统计卡片、内容卡片、课程卡片、AI卡片、会员卡片、活动卡片、心声卡片等
+- 响应式断点：针对不同屏幕宽度的网格列数与布局调整
+
+章节来源
+- [index.html](file://index.html)
+
+## 架构总览
+内容区域的布局架构围绕“网格系统 + 主题变量 + 响应式断点”展开，辅以交互脚本完成页面与内容区切换。
+
+```mermaid
+graph TB
+subgraph "主题与排版"
+T1["CSS变量(:root)"]
+T2["字体与行高(body)"]
+T3["阴影与渐变(阴影/渐变变量)"]
+end
+subgraph "页面与容器"
+P1["登录页(login-page)"]
+P2["仪表盘页(dashboard-page)"]
+P3["AI智能体页(ai-page)"]
+C1["仪表盘内容(dashboard-content)"]
+C2["AI内容(ai-content)"]
+end
+subgraph "网格系统"
+G1["统计网格(stats-grid)"]
+G2["内容网格(content-grid)"]
+G3["课程网格(course-grid)"]
+G4["AI网格(ai-grid)"]
+G5["会员网格(membership-grid)"]
+G6["活动列表(activity-list)"]
+G7["心声网格(testimonial-grid)"]
+end
+subgraph "交互与动画"
+S1["页面切换(showPage)"]
+S2["Tab切换(showTab)"]
+S3["用户菜单(toggleUserMenu/closeAllMenus)"]
+S4["加载遮罩(login-loading)"]
+end
+T1 --> G1
+T1 --> G2
+T1 --> G3
+T1 --> G4
+T1 --> G5
+T1 --> G6
+T1 --> G7
+T2 --> P2
+T2 --> P3
+T3 --> G1
+T3 --> G2
+T3 --> G3
+T3 --> G4
+T3 --> G5
+T3 --> G6
+T3 --> G7
+P1 --> S4
+P2 --> C1
+P3 --> C2
+C1 --> G1
+C1 --> G2
+C1 --> G3
+C1 --> G4
+C1 --> G5
+C1 --> G6
+C1 --> G7
+C2 --> G4
+S1 --> P1
+S1 --> P2
+S1 --> P3
+S2 --> G1
+S2 --> G2
+S2 --> G3
+S2 --> G4
+S2 --> G5
+S2 --> G6
+S2 --> G7
+```
+
+图表来源
+- [index.html](file://index.html)
+
+## 详细组件分析
+
+### 网格系统与卡片类型
+- 统计卡片网格（stats-grid）
+  - 规则：固定4列栅格，列间距与卡片内边距统一，悬停提升与阴影增强
+  - 适用：平台概览中的指标展示
+- 内容卡片网格（content-grid）
+  - 规则：默认3列，卡片内含图标、标题、描述与列表；hover轻微上移
+  - 适用：三大业务板块（教育/AI/校友）的功能概览
+- 课程卡片网格（course-grid）
+  - 规则：默认4列，卡片内含图标、标题、描述与元信息（时长/人数）
+  - 适用：课程体系展示与学习路径
+- AI卡片网格（ai-grid）
+  - 规则：默认3列，卡片含头像、标签、特性标签与操作按钮；hover提升与边框强调
+  - 适用：AI智能体门户
+- 会员卡片网格（membership-grid）
+  - 规则：默认3列，推荐卡片带徽章与渐变背景；hover提升与阴影增强
+  - 适用：会员体系对比
+- 活动列表（activity-list）
+  - 规则：垂直列表，每项含日期、信息与标签；hover向右平移
+  - 适用：近期活动展示
+- 心声网格（testimonial-grid）
+  - 规则：2列网格，卡片内含引号文本与作者信息
+  - 适用：校友评价展示
+
+```mermaid
+classDiagram
+class StatsGrid {
+grid-template-columns : 4
+gap : 24px
+hover : 提升+阴影
+}
+class ContentGrid {
+grid-template-columns : 3
+gap : 24px
+item : 图标+标题+描述+列表
+hover : 轻微上移
+}
+class CourseGrid {
+grid-template-columns : 4
+gap : 20px
+item : 图标+标题+描述+元信息
+hover : 提升+阴影
+}
+class AiGrid {
+grid-template-columns : 3
+gap : 24px
+item : 头像+标签+特性+按钮
+hover : 提升+边框强调
+}
+class MembershipGrid {
+grid-template-columns : 3
+gap : 24px
+item : 标题+价格+描述+列表
+recommended : 徽章+渐变背景
+hover : 提升+阴影
+}
+class ActivityList {
+flex-direction : column
+item : 日期+信息+标签
+hover : 向右平移
+}
+class TestimonialGrid {
+grid-template-columns : 2
+gap : 24px
+item : 引号文本+作者信息
+}
+```
+
+图表来源
+- [index.html](file://index.html)
+
+章节来源
+- [index.html](file://index.html)
+
+### 响应式布局策略
+- 大屏（≥1200px）
+  - 登录页内容改为纵向排列
+  - 功能卡片网格：3列
+  - 统计卡片网格：2列
+  - 内容卡片网格：2列
+  - AI卡片网格：2列
+- 中屏（≤1200px）
+  - 功能卡片网格：3列
+  - 统计卡片网格：2列
+  - 内容卡片网格：2列
+  - AI卡片网格：2列
+- 小屏（≤768px）
+  - 登录页内容：减少内边距，表单宽度自适应
+  - 导航菜单隐藏，侧边栏简化
+  - 统计卡片网格：1列
+  - 内容/会员/AI卡片网格：1列
+  - 课程网格：2列
+  - Tab导航：横向滚动
+  - 聊天窗口：尺寸适配移动设备
+
+```mermaid
+flowchart TD
+Start(["进入页面"]) --> Viewport["检测视口宽度"]
+Viewport --> Large{"≥1200px?"}
+Large --> |是| LargeLayout["大屏布局<br/>网格列数按规则设置"]
+Large --> |否| Medium{"≤768px?"}
+Medium --> |是| SmallLayout["小屏布局<br/>网格列数降级为1列<br/>登录页自适应宽度"]
+Medium --> |否| MediumLayout["中屏布局<br/>网格列数适度压缩"]
+LargeLayout --> End(["渲染完成"])
+MediumLayout --> End
+SmallLayout --> End
+```
+
+图表来源
+- [index.html](file://index.html)
+
+章节来源
+- [index.html](file://index.html)
+
+### 排版系统、间距控制与对齐规则
+- 字体与行高
+  - 全局字体族与行高统一，确保阅读舒适度
+- 标题层级
+  - 页面标题、卡片标题、子标题采用明确字号与字重，形成清晰的视觉层级
+- 间距控制
+  - 卡片间外边距、网格间隙、内边距均以统一变量控制，保证一致性
+- 对齐规则
+  - 居中、两端对齐、左对齐在不同容器中分场景使用，保持信息密度与可读性的平衡
+
+章节来源
+- [index.html](file://index.html)
+
+### 交互设计与动画
+- 页面切换与Tab切换
+  - 使用类名切换与淡入动画，避免闪烁
+- 卡片悬停
+  - 提升与阴影变化，提供明确的交互反馈
+- 下拉菜单与筛选
+  - 缩放入场动画，点击外部区域自动关闭
+- 加载遮罩
+  - 渐变背景与旋转动画，提升等待体验
+
+章节来源
+- [index.html](file://index.html)
+
+### 可访问性与色彩对比度
+- 色彩体系
+  - 主色、辅助色、强调色与背景色通过CSS变量统一管理，便于主题切换
+- 文字对比度
+  - 文本颜色与背景色满足基本对比度要求，确保可读性
+- 交互元素
+  - 悬停与焦点状态明确，键盘可达性良好（结合现有交互）
+
+章节来源
+- [index.html](file://index.html)
+
+## 依赖关系分析
+- 样式依赖
+  - 所有组件依赖于CSS变量定义的主题色与阴影
+  - 响应式断点依赖于媒体查询
+- 脚本依赖
+  - 页面切换与Tab切换依赖DOM节点选择与类名操作
+  - 下拉菜单与筛选依赖事件监听与状态管理
+- 数据流
+  - 登录成功后更新用户显示信息，随后切换页面
+
+```mermaid
+sequenceDiagram
+participant U as "用户"
+participant JS as "脚本"
+participant DOM as "DOM"
+participant Page as "页面"
+U->>JS : 输入账号密码并提交
+JS->>DOM : 显示加载遮罩
+JS->>JS : 验证输入
+JS->>DOM : 隐藏加载遮罩
+JS->>DOM : 更新用户显示
+JS->>Page : 切换到仪表盘页
+Note over JS,Page : 页面切换与Tab切换由脚本控制
+```
+
+图表来源
+- [index.html](file://index.html)
+
+章节来源
+- [index.html](file://index.html)
+
+## 性能考量
+- 样式层面
+  - 使用CSS变量减少重复定义，降低维护成本
+  - 合理使用box-shadow与transform，避免强制重排
+- 交互层面
+  - 下拉菜单与筛选使用缩放动画，避免复杂布局抖动
+  - 响应式断点仅在必要时改变网格列数，减少重绘
+- 资源层面
+  - 图标以emoji或小尺寸背景图实现，避免额外资源请求
+
+## 故障排查指南
+- 页面无法切换
+  - 检查页面ID是否正确，确认脚本中showPage调用的目标ID存在
+- Tab内容未显示
+  - 检查Tab按钮与内容区ID是否一致，确认active类名切换逻辑
+- 下拉菜单不关闭
+  - 检查点击外部关闭逻辑是否绑定到document，确认closeAllMenus被调用
+- 响应式异常
+  - 检查媒体查询断点与网格列数设置，确认浏览器视口尺寸触发预期断点
+- 卡片悬停无效果
+  - 检查hover样式是否被覆盖，确认CSS变量值正确
+
+章节来源
+- [index.html](file://index.html)
+
+## 结论
+本项目的内容区域布局以网格系统为核心，结合统一的主题变量与响应式断点，实现了跨设备的一致体验。通过卡片化的内容组织与明确的交互反馈，既满足了信息密度的需求，也兼顾了可用性与可访问性。建议在后续迭代中进一步完善无障碍属性与键盘导航，并持续优化移动端交互细节。
+
+## 附录
+- 主题变量清单（摘自CSS变量）
+  - 主色、主色浅/深、辅助色、强调色、背景色、卡片背景、文本主/次色、边框色
+  - 渐变色1/2、阴影变量（sm/md/lg/xl）
+- 常用间距与尺寸
+  - 卡片圆角、内边距、网格间隙、卡片图标尺寸、头像尺寸等
+- 媒体查询断点
+  - ≥1200px、≤768px两个主要断点下的网格列数与布局调整
+
+章节来源
+- [index.html](file://index.html)