看到cursor成品,两字形容Wo~Cao~

感受

最近好几个功能使用cursor来实现,成品率很高,令人惊艳,对它越来越有信心,也越来越信任。
就目前实践的感受,cursor非常擅长读懂已有工程的代码结果,如果提示要有参考的页面,他会学习得非常完美。

案例效果

以下就展示一个交互复杂的一个页面,按传统的开发我估计4天,使用cursor+个人微调,1天就出品,质量还挺高,提效很多。

先来看页面的效果:
输入图片说明
表头和底部横向滚动条悬浮的效果
输入图片说明

页面功能(只罗列比较复杂的部分)

1 类excel表格的数据展示风格,按天小计、按项目小计、合计。
2 表头和底部横向滚动条悬浮固定,随页面尺寸自适应。
3 类似excel高亮显示行列,方便看数
4 将页面里的表格生成一张图片
5 查询条件中部门和人员联动ajax刷新

使用cursor开发过程

1 关键提示词

你是zentao二次开发专家,编写代码实现如下的功能。
  页面名称:月度工作报告  workreportbymonth
1、页面功能
  1)查询条件:选择用户(下拉,默认为空)、选择项目(下拉,默认为空)、选择月份(月份选择控件,默认为当前月份)
  2)表格展示结果
    a)表头为:表头第一行月份、日期(这个月的每一天作为一列,根据选择的月份的天数动态调整列,例如:有些月28天,有些30天,有些29天);
  表头第二行为日期对应的星期(例如周一、周二、周六、周日等)。
    b)第三行为每一天工时的小计。    
    c)第四行开始的第一列先本人本月工时填写记录的项目,再罗列项目下的有工时填写记录的任务。
  如果是项目,显示格式为:{项目经常} {耗时} ,耗时为这个项目这个月的耗时;
  如果是任务,显示格式为:#{对象ID} {对象名称} {耗时} ,耗时为这个工作对象这个月的耗时 
    d)第四行开始的第二列为项目或任务在每一天的工时。
2、页面设计
  1)参考附件图片。节假日使用不用的颜色区分。
3、代码结构
  1)生成的代码集中放在\zentao\extension\custom\myworklog\ext目录下,涉及到model\control\css\js\html\lang,参考同目录下的memberconsumedcount这个页面相关的代码的位置。
4、数据源
  1)参考\zentao\extension\custom\myworklog目录下的worklogcalendarview页面所需要的数据源,这个页面具备:
    a)一个月的所有日期数据(每天有标记是工作日、非工作日),
    b)指定用户的这个月每天的工作耗时记录,包括:归属的对象、归属的项目、耗时。
    可以基于这个现场的数据源实现上面的页面的功能。
5、生成的页面,访问入口和memberconsumedcount一样,挂在同一个大模块下。

参考的图片如下:
输入图片说明

2 通过逐步测试逐步迭代方式完善,举例:行列高亮的提示词

1、表格里针对工作对象的行hover某一行时,整行要有被选择的效果,目前估计是被列的样式挡住了。项目的行不需要这样处理。
2、再增加纵向的高亮
3、鼠标如果落入到第二列开始的单元格,将这列所有的单元格加上选中的效果,参考行的hover的效果。
4、表格里针对工作对象的行hover某一行时,整行要有被选择的效果,项目的行也需要这样处理。这里调整一下。
5、纵向的高亮的颜色要和横向的保持一致;同时第一至第三行相应的单元格也高亮
6、第三行的相应的单元格没高亮,可能原有的样式的优先级的问题
7、高亮的颜色调整为:#FCF2E0;悬浮的表头的相应列的单元格也要高亮
8、项目所在的行被高亮时,字体的原来的颜色是白色的,导致看不清楚。期望改成黑色

总结

内容已经隐藏, 输入“粉丝邀请码”查看。感谢支持原创内容,期待您关注B站“写代码的产品飞哥”,关注后私信up主发送“粉丝邀请码”,马上回复哦。如果已经获取“粉丝邀请码”, 绑定粉丝邀请码

--B站/抖音:写代码的产品飞哥

--分享运营真实案例,用编程创造自己的产品

0 条评论