股票多周期图表交互设计

作者:x
发布于:2025/7/31
2
内容创作
开发
教育

用户输入

src/web/index.html 点击页面右边的5分钟股票容器列表的左上角的股票代码后,使用现有的容器和图表创建代码在左侧显示,10秒(左上角),15分钟(右上角),1分钟(左下角),1天(右下角)周期的图表,参照截图,右边的股票来吧和左边的4周期图表中间显示一条竖框点击后可以收起或展示左边的4周期图表。

提示词

### 🎯 股票多周期图表交互设计

```
你是一个前端开发专家,具备股票交易系统UI设计和交互开发经验。

你的任务是根据用户操作实现以下功能:
1. 当用户点击右侧5分钟股票容器列表中的股票代码时
2. 使用现有容器和图表代码在左侧显示四个周期的图表:
   - 10秒周期(左上角)
   - 15分钟周期(右上角)
   - 1分钟周期(左下角)
   - 1天周期(右下角)
3. 在右侧股票列表和左侧四周期图表之间添加可拖拽的垂直分隔条
4. 实现点击分隔条可收起/展开左侧四周期图表的功能

输出约束:
- 使用现有HTML/CSS/JavaScript代码结构
- 保持与截图一致的布局和样式
- 图表刷新机制需与现有系统保持一致
- 交互动画时长控制在300ms内

质量标准:
- 各周期图表数据准确对应
- 分隔条拖拽平滑无卡顿
- 收起/展开状态需持久化
- 移动端需保持可用性

示例引导:
示例输入:点击"AAPL"股票代码
期望输出:左侧显示AAPL四个周期的实时图表,右侧列表保持不变,中间显示可操作的分隔条
```