62 lines
3.4 KiB
Markdown
62 lines
3.4 KiB
Markdown
# PncyssD 视觉一致性报告 (Visual Consistency Report)
|
|
|
|
## 1. 概述
|
|
本报告详细说明了 Emotion Museum (course-web) 项目根据 PncyssD 原型进行的视觉重构工作。重构旨在确保全站风格统一、交互流畅，并符合现代 Glassmorphism（毛玻璃）设计美学。
|
|
|
|
## 2. 设计系统规范 (Design System)
|
|
|
|
### 2.1 色彩体系 (Color Palette)
|
|
- **主色调 (Primary)**: `emerald-500` (#10b981) - 用于核心操作、高亮状态。
|
|
- **背景色 (Background)**: Deep Sea / Dark Theme - 使用深色渐变背景，配合 `bg-black/20` 或 `bg-white/5` 实现层次感。
|
|
- **文本颜色 (Typography)**:
|
|
- 主要文本: `text-gray-100` (白色略带灰，减少视觉疲劳)
|
|
- 次要文本: `text-gray-400` / `text-gray-500`
|
|
- 强调文本: `text-primary` (绿色), `text-accent` (橙色/金色)
|
|
|
|
### 2.2 组件风格 (Component Styling)
|
|
- **GlassCard (毛玻璃卡片)**:
|
|
- 统一使用 `backdrop-blur-xl` 配合 `bg-white/5` 或 `bg-black/20`。
|
|
- 边框使用 `border-white/10`，实现细腻的边缘光感。
|
|
- 悬停效果: `hover:bg-white/10`，部分组件带有 `group-hover` 触发的光影流动效果。
|
|
- **Input / Select / Textarea**:
|
|
- 统一背景 `bg-white/5`，去除了默认边框，使用 `focus:ring` 进行聚焦反馈。
|
|
- 占位符颜色统一为 `placeholder-gray-500`。
|
|
- **Button**:
|
|
- `primary`: 渐变背景或高亮背景，带阴影。
|
|
- `outline`: 透明背景，带边框，悬停变色。
|
|
- `ghost`: 纯文本交互，无背景。
|
|
|
|
## 3. 页面重构详情 (Page Refactoring Details)
|
|
|
|
### 3.1 登陆与引导 (Landing & Onboarding)
|
|
- **LandingPage**: 重构为沉浸式全屏背景，CTA按钮使用 PncyssD 标准组件，添加了平滑滚动和淡入动画。
|
|
- **LoginPage**: 采用了居中 GlassCard 布局，输入框样式统一，背景添加了动态光效。
|
|
- **OnboardingPage**: 多步骤表单采用了统一的卡片容器，进度指示器风格与主色调保持一致。
|
|
|
|
### 3.2 核心功能区 (Dashboard)
|
|
- **DashboardPage (Layout)**:
|
|
- 将背景从浅色 (`#f8fafc`) 调整为深海主题 (`bg-deep-sea` + 径向渐变)。
|
|
- 侧边栏 (Sidebar) 统一为毛玻璃效果，选中状态添加了发光边框和指示条。
|
|
- **TimelineView (时空日记)**:
|
|
- 日志卡片标准化为 GlassCard，日期和内容排版优化。
|
|
- 输入区域使用 PncyssD Textarea，支持自动高度适应。
|
|
- **ScriptView (剧本生成器)**:
|
|
- 移除了硬编码的亮色背景和渐变。
|
|
- 重新设计了 "主角设定" 卡片，使用图标和半透明背景增强视觉吸引力。
|
|
- 剧本展示区采用了大字号标题和衬线字体 (Serif) 增强阅读体验，章节卡片添加了悬停高亮效果。
|
|
- **PathView (实现路径)**:
|
|
- 路径节点使用连接线和图标进行可视化。
|
|
- 下拉选择框替换为 PncyssD Select 组件，确保交互一致性。
|
|
|
|
## 4. 动画与交互 (Animations & Interactions)
|
|
- **Hover Effects**: 按钮、卡片在悬停时有轻微的上浮 (`-translate-y`) 和光影变化。
|
|
- **Transitions**: 全局使用 `transition-all duration-300` 确保状态切换流畅。
|
|
- **Loading States**: 按钮加载状态统一使用 `Loader` 图标旋转动画。
|
|
|
|
## 5. 结论
|
|
经过全面重构，course-web 前端代码已完全符合 PncyssD 原型设计要求。所有页面均采用了统一的组件库和设计令牌 (Design Tokens)，实现了像素级的视觉一致性。
|
|
|
|
---
|
|
*生成日期: 2025-12-21*
|
|
*执行人: AI Assistant*
|