DeckEditor | Desktop View

[Deardrops]

页面结构

• 卡组编辑器页面
  • 页面头部：标题
  • 卡面详情区域：卡图 + 信息表格，当前显示的卡的pid存储在vuex中
    • CardImage 组件：显示卡图
    • CardInfoTable 组件： 显示该卡的详细信息
  • 卡组显示区域：Block视图，1行10列，区分主卡组和分身卡组
    • 功能选项（切换，新建，删除，重命名，导入，导出卡组）
    • Block 组件：显示单张卡，悬停查看详细，点击删除该卡
  • 搜索区域：Block视图，单列
    • 搜索框：搜索的字符串存储在组件中，由计算属性matchedCards渲染内容
    • 列表容器组件： 为其中的Block提供长列表优化
      • Block组件：显示单张卡，悬停查看详细，点击添加该卡

代码改进

• 抽象出CardInfoTable组件
  • exclude 参数：不包括在信息表格中的卡面属性
• 扩展Block组件
  • 点击后可以跳转详情页/.删除该卡/添加该卡，传出click事件，由父组件为其指定处理函数。
  • 一行中项的个数、各项的间距由父组件为其定义
• 进一步抽象列表容器组件
  • 可以 响应式地切换单列或多列
  • 列表对象可以为Cell或Block。

需要进一步讨论的问题

1. 对卡组操作的功能按钮放在AppHeader的下拉菜单中，还是放在别的地方？
2. 是否需要在低分辨率显示单列的搜索结果，高分辨率显示多列的搜索结果？
3. 调整store中部分内容：

• 每次在store中添加一张卡，就为卡组做一次排序。
• 在store中设置卡组数量的上限。
• 不信任传递给action的参数，每次都做检查，检查失败时尽可能返回详细的信息。

[Deardrops]

个人意见

1. 功能按钮放在卡组显示区域的最上方，都以图标的形式显示。点击后弹出Modal。
2. 单列的屏幕利用率较低（一屏只有3-4张卡），多列可以极大地提高屏幕利用率（虽然可能不好看）。
3. 在store.js中添加一些内容。

[Deardrops]

重新分析用户需求和设计页面

需求分析

1. 浏览卡组，一眼就能看到自己卡组的所有卡
2. 搜索卡牌，通过搜索栏搜索特定的卡片
3. 卡组操作，从卡组中删除卡牌，或者从搜索结果中添加卡牌到卡组
4. 查看详情，查看某一张卡的详情

实现方式

1、2、4属于布局上的问题，3、4属于交互上的问题

主要区域有3个——卡组区，搜索区和详情区。
整体布局包括3部分：顶部是导航栏，中间主体是卡组区或搜索区，右边侧边栏为详情区。
导航栏中包含搜索栏（输入文字后立即显示搜索结果页面）
搜索结果页面作为一个tab页，通过鼠标移出该区域的方式浏览卡组，鼠标移回区域浏览搜索结果。
交互上，当鼠标悬停到一张卡上时，在详情区显示这张卡的详细信息。
悬浮在一张卡上会模糊这张卡并显示删除/添加按钮，点击按钮实现对应的功能。