# UI 交互改进说明 ## 改进前后对比 ### 改进前 ❌ **起始页面** ``` ┌─────────────────────────────────────────┐ │ 搜索框：搜索标的... │ └─────────────────────────────────────────┘ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ 贵州茅台 │ │ 其他股票 │ │ 更多... │ │600519.SH │ │ │ │ │ │ +1.85% │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ ↓ 点击进入 评级详情页（默认右侧隐藏） ┌─────────────────────┬──────────────┐ │ │ │ │ 资产评级表 │ (空白) │ │ │ │ │ 需要点击指标 │ 未显示图表 │ │ 才会显示图表 │ │ │ │ │ └─────────────────────┴──────────────┘ ``` **问题**： 1. 下方显示的是股票卡片，而非模版 2. 进入详情页后需要手动点击才能看到图表 3. 没有模版选择的概念 --- ### 改进后 ✅ **起始页面** ``` ┌─────────────────────────────────────────┐ │ 🔍 搜索框：搜索标的... │ │ ✓ 已选择股票和模版，点击模版卡片或按回车 │ └─────────────────────────────────────────┘ 选择评级模版 ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ 📄 默认 │ │ 📈 消费股│ │ 🔬 科技股│ │ ⚡ 快速 │ │ 评级模版 │ │ 模版 │ │ 模版 │ │ 诊断模版 │ │ │ │ │ │ │ │ │ │[通用][全面]│ │[消费][品牌]│ │[科技][成长]│ │[快速][简洁]│ │ ✓ 选中 │ │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ ↓ 选择模版后自动进入 评级详情页（默认右侧展开） ┌─────────────────────┬───────────────────┐ │ │ │ │ 资产评级表 │ 📊 图表详情 │ │ │ │ │ 点击指标跳转 │ 自动显示图表 │ │ 左右联动 │ 研判结论 │ │ │ 图表说明 │ └─────────────────────┴───────────────────┘ ``` **优势**： 1. ✅ 模版化思维：用户选择分析模版而非简单地看股票 2. ✅ 一步到位：进入详情页即可看到完整的分析结果 3. ✅ 视觉引导：清晰的提示文字指导用户操作 4. ✅ 即时反馈：选中状态有明显的视觉标识 --- ## 关键交互改进 ### 1. 搜索框提示优化 **动态提示文字**： ``` 未输入股票： "先输入股票名称，然后从下方选择评级模版" 已输入股票，未选模版： "✓ 已选择股票，请选择一个评级模版" 已输入股票，已选模版： "✓ 已选择股票和模版，点击模版卡片或按回车进入" ``` ### 2. 模版卡片选中状态 **未选中**： - 白色背景 - 灰色边框 - 正常大小 **选中时**： - 彩色边框（根据模版主题色） - 外圈阴影效果 - 右上角显示 ✓ 标识 - hover 时图标放大动效 ### 3. 自动跳转逻辑 ```typescript // 输入股票 → 选择模版 → 自动进入 if (searchTerm && selectedTemplate) { navigate(`/dashboard?template=${selectedTemplate}`); } ``` ### 4. 默认展开图表 ```typescript // DashboardPage 初始状态 const [rightPanelVisible, setRightPanelVisible] = useState(true); // ✅ 改为 true const [shouldRenderCharts, setShouldRenderCharts] = useState(true); // ✅ 改为 true ``` --- ## 模版设计 ### 模版数据结构 ```typescript interface RatingTemplate { id: string; // 唯一标识 name: string; // 模版名称 description: string; // 详细描述 icon: ReactElement; // 图标组件 bgColor: string; // 背景色类名 iconColor: string; // 图标颜色类名 borderColor: string; // 边框颜色类名 tags: string[]; // 标签数组 } ``` ### 四种预设模版 | 模版 | 图标 | 主题色 | 适用场景 | |------|------|--------|----------| | 默认评级 | 📄 | 蓝色 | 通用全面分析 | | 消费股 | 📈 | 紫色 | 消费行业股票 | | 科技股 | 🔬 | 青色 | 科技成长股票 | | 快速诊断 | ⚡ | 橙色 | 快速决策场景 | --- ## 响应式布局 ### 桌面端（>1024px） ``` 起始页：4列模版卡片网格 详情页：左侧评级表 + 右侧图表（可关闭） ``` ### 平板端（768px-1024px） ``` 起始页：2列模版卡片网格 详情页：左侧评级表（右侧在大屏显示） ``` ### 移动端（<768px） ``` 起始页：1列模版卡片网格 详情页：仅显示评级表，点击指标进入全屏图表 ``` --- ## 动画效果 ### 卡片动画 - **hover**：阴影增强、图标放大 110% - **选中**：边框动画、外圈光晕 - **点击**：轻微缩放反馈 ### 页面过渡 - **搜索结果**：fade-in + slide-down - **加载中**：旋转加载图标 + 半透明遮罩 - **滚动定位**：smooth scroll 行为 ### 状态提示 - **成功**：绿色对勾 + 淡入效果 - **排序**：绿色提示条 + 2秒自动消失 - **错误**：红色警告 + 震动效果 --- ## 可访问性优化 ### 键盘操作 - **Tab**：在模版卡片间切换焦点 - **Enter**：提交搜索或选择模版 - **Escape**：关闭弹窗 ### 语义化 HTML - 使用 `
`, `
`, `