遇到复杂的业务需求的时候 「要么前端复杂，要么后端」
- 画图，这样思路清晰明了
- 该参加的会议，一定参加，不然后面得吃亏，把流程对清楚之后，后面就不会遇到坑
- 当你遇到一个需求，工作流前端做的时候，接口遍历像链表遍历，十次，你内心一句 mmp, 里面还有两个是轮询成功才能走下一步接口，这里明显接口设计有问题
提测、或者上线之前，让 teach leader 验收一下，即使测试通过了，发邮件给你，可以上线了
防止领导，在线上环境体验，觉得这个不怎么好，需要改一下，那需要改一下，
自测的时候，测试的数据和线上保持一致，这样就提前查出问题
问题：自测和测试都使用的网图、随便的一个 psd 文件，没法测试出使用图片，在标记 psd 文件上，生成的图片分辨率下降了。
原因：使用的图片是预览的图片 （缩率图）的图片地址，应该使用生成的原图
解决：改调用原图接口
自己一直本地、测试环境，没有复现出测试的缺陷
需要找测试，看他是怎样操作才复现出来，只要能复现出来缺陷，都好解决
问题：测试有时发现审核列表，素材视频播发，进度条样式偏移，播放、全屏按钮都不显示
原因：全局样式污染导致，当你先点击【视频管理】里面视频播放时，然后再点击素材视频播发，才会复现出样式污染，也不清楚为啥之前设置是全局的
学会利用 GPT-4o 辅助代码
目前需求 60%-70% 代码都是它写，明显自己效率提高了很多,也有人说，需求复杂的情况，它不行，这个是自己没有需求拆分给 gpt
1. 使用技术栈 react ,ant, typeScript
2. 上传需求原型图
3. 产品需求描述，基本它都会漏掉一些需求
4. 最好有，已经写过的代码规范案例，给 gpt 学习
5. 后面让它优化代码，封装组件，封装函数，封装 hook
下面一个例子，把计算公式给它，然后傻瓜式编程，如果我写，肯定不可能短时间，立刻写出来，它就几分钟，即使我写，代码质量肯定没它规范
import { useMemo } from "react";
/**
* 计算单个镜头的时长
* @param shot - 单个镜头对象
* @param type - 计算类型（'min' 或 'max'）
* @returns 单个镜头的最小时长或最大时长
*/
const getShotDuration = (shot: any, type: "min" | "max"): number => {
return shot.materials.reduce(
(result: number, video: any) => {
return type === "min"
? Math.min(result, video.duration)
: Math.max(result, video.duration);
},
type === "min" ? Infinity : -Infinity,
);
};
/**
* 过滤有效镜头
* @param shots - 镜头数组
* @returns 仅包含有效镜头的数组（即 material_ids 长度大于 0 的镜头）
*/
const filterValidShots = (shots: any[]): any[] => {
return shots.filter((shot) => shot.material_ids.length > 0);
};
/**
* 自定义 Hook，用于计算镜头的统计信息
* @param shots - 镜头数组
* @returns { minDuration, maxDuration, totalVideos } - 最小时长、最大时长和视频总数
*/
const useShotStatistics = (
shots: any[],
): { minDuration: number; maxDuration: number; totalVideos: number } => {
const validShots = useMemo(() => filterValidShots(shots), [shots]);
const minDuration = useMemo(() => {
if (validShots.length === 0) return 0;
return validShots.reduce((totalDuration: number, shot: any) => {
return totalDuration + getShotDuration(shot, "min");
}, 0);
}, [validShots]);
const maxDuration = useMemo(() => {
if (validShots.length === 0) return 0;
return validShots.reduce((totalDuration: number, shot: any) => {
return totalDuration + getShotDuration(shot, "max");
}, 0);
}, [validShots]);
const totalVideos = useMemo(() => {
if (validShots.length === 0) return 0;
return validShots.reduce(
(acc: number, shot: any) => acc * (shot.material_ids.length || 1),
1,
);
}, [validShots]);
return { minDuration, maxDuration, totalVideos };
};
export default useShotStatistics;
