总结项目中遇到的一些小问题基于 nodemon 并行项目启动和 mock 接口启动可视化大屏如何适配 antd V

基于 nodemon 并行项目启动和 mock 接口启动

可视化大屏如何适配

/*
 * 1、以宽进行适配=>解决文字变形问题
 * 2、最外层的盒子width height 也要写死 1920、1080 => 固定值为比例进行计算
 **/ 
export const handleResize = (size: Size) => {
  const { width } = size;
  const baseScreenWidth = 1920 // 假设基准屏幕宽度为 1920px
  const baseScreenHeight = 1080 // 假设基准屏幕高度为 1080px
  const scaleX = width / baseScreenWidth
  // 根据计算得到的缩放比例应用到可视化大屏幕组件上
  // 例如，你可以通过设置样式来调整缩放比例：
  const screenMonitoringContainer = document.querySelector('.xxx') as HTMLElement
  if (screenMonitoringContainer) {
    screenMonitoringContainer.style.transform = `scale(${scaleX},${scaleX})`
    screenMonitoringContainer.style.transformOrigin = '0 0';
  }
}

antd V5 兼容性问题，低版本不支持

安装: @ant-design/cssinjs

所以重点就来啦，如果是不在组件内怎么调用呢？？
封装一个工作组件，通过 发布订阅/redux/RTK 通信的方式派发触发对应通知组件的更新即可

还有就是 antd 的 APP 组件也是低版本不兼容的，尽量不要使用。

如果 tsconfig.json中配置了 target："esnext",在打包的后，在 chrome 79版本不会兼容 ?.可选链运算符，即使 webpack 配置了相关插件也不顶用，必须改为 es2015才能解决这个问题。

LocalStorage 第二次打开页面的时候，没有手动清除，但是在缓存中不见啦

页面没有数据返回 0 的情况

arr.length && xxxx  
如果 arr.length 为 0的话 直接在页面上返回 0 了这是我们不愿意看到的  
改正  
Boolean(arr.length) && xxxx

useEffect 第二次参数为 [] 发送接口，接口发送了两次，打包后到服务器上接口就发送一次

root.render( <React.StrictMode> <App /> </React.StrictMode> );  
root.render( // 去除React.StrictMode // <React.StrictMode> <App /> // </React.StrictMode> );

更严格的严格模式：将来，React 将提供一项功能，让组件在卸载之间保留状态。为了做好准备，React 18 引入了一种新的严格模式检查，仅用于开发。每当组件第一次挂载时，React 都会自动卸载并重新挂载每个组件，并在第二次挂载时恢复之前的状态。如果这会破坏您的应用程序，请考虑删除严格模式，直到您可以修复组件以使其能够以现有状态重新安装。

script 标签 GET 请求问题

比方说，我们服务器设置了 js 缓存，我们发现这个公司自身维护的 SDK 有问题，我们直接 cv 具体的内容进行一个替换部署成功后，如果不手动清除缓存我们看到的还是旧的资源。

chrome 请跨域安全求报错

has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space private（已被 CORS 策略阻止：请求客户端不是安全上下文，资源在更私人的地址空间中是私人的
原因

因为当前请求的地址是公网地址，然后请求的资源在内网地址，所以被 chrome 拦截
解决方法

在 chrome 中访问：chrome://flags/#block-insecure-private-network-requests 将其修改为disabled || 将所有的地址全部修改为公网或者内网地址,彻底解决就是线上都是 https 访问即可。

项目中研发需要注意的情况 ?

1、如果遇到异常情况看一下是否 chrome://flags 是否全部重置
2、是否开启了代理、是否是网络不太稳定
3、是否没有关闭 host
4、这个项目内网域名、外网域名
5、多测试一下无痕非无痕模式的情况
6、如果走的前端本地存储，考虑一下用户自己清除缓存的操作,尤其是对于详情页来说
7、涉及到第三方插件的必要参数，多去问一下对方的研发有什么需要注意的点
8、注意环境区分远程https 链接最好写成 // 的形式
9、node 版本是否过高/过低

JS实现文本复制

async function clipboardCopy(text) {
  try {
    await window.navigator.clipboard.writeText(text)
  } catch (error) {
    const copyInput = document.createElement('input')
    copyInput.setAttribute('value', text)
    copyInput.setAttribute('readOnly', true)
    document.body.appendChild(copyInput)
    // 选中
    copyInput.focus()
    copyInput.setSelectionRange(0, copyInput.value.length)
    // 复制
    if (document.execCommand('copy')) {
      document.execCommand('copy')
      document.body.removeChild(copyInput)
    } else {
      document.body.removeChild(copyInput)
      throw new Error('复制到剪贴板失败')
    }
  }
}

如何解决 `background:cover` 的拉伸宽度缩小后呗裁剪的问题

使用 png 二倍图，background-size: 100% 100% 即可，如果使用 svg 就会出现覆盖被裁减的问题
svg 是矢量图，一倍图。

node 版本18.12.0, pnpm i 安装失败

问题：

1、如果 node 在 18 以上，打包会失败，因为 OpenSSL 加密导致需要调整环境变量 export NODE_OPTIONS=--openssl-legacy-provider

2、Cannot find module '../build/Release/canvas.node' Require stack: - /Users/..../pnpm-jest-jsdom-canvas/node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/lib/bindings.js

mac 电脑解决方案： `brew install pkg-config cairo pango libpng jpeg giflib librsvg`

X-Requested-With 解决 302 重定向问题

X-Requested-With 是一个自定义的HTTP请求头，主要用于在服务器端识别请求是由Ajax技术发起的还是由其他技术发起的。这个请求头是由浏览器或客户端应用程序添加的，因此其值可能取决于发送请求的客户端或者开发者的选择。

如果请求不是通过JavaScript的 XMLHttpRequest 对象发出的，那么 X-Requested-With 头部可能不会被设置。例如，直接在浏览器地址栏中输入URL或使用HTML表单提交的请求通常不会包含 X-Requested-With 头部。

request.getHeader(X-Requested-With) 是一个在服务器端用于检测HTTP请求头部（Header）中的 X-Requested-With 字段的方法。这个字段通常用来识别请求是由哪种类型的客户端发出的，尤其是区分同步请求和异步请求（如Ajax请求）。

if (request.getHeader("x-requested-with") != null) {    
    console.log("该请求是 AJAX 异步HTTP请求");    
}else{     
    console.log("该请求是传统的 同步HTTP请求");    
}

Insecure origins treated as secure(解决跨域问题)

Insecure origins treated as secure 是指在 Google Chrome 浏览器中，将某些不安全的来源（例如 HTTP）视为安全来源（例如 HTTPS）。这通常用于开发环境中，以便在本地开发时能够使用某些功能（如地理位置、摄像头等），这些功能通常只在安全来源（HTTPS）下可用。

通过 Blob 生成本地链接，确保自定义的 fileName 在下载时生效

export const downloadFile = (url: string, filename: string) => {
  fetch(url)
    .then(res => res.blob())
    .then(blob => {
      const blobUrl = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.download = filename;
      a.href = blobUrl;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(blobUrl);
    });
};

以下是您提供的 `accept` 属性中包含的文件类型的 Markdown 格式总结：

| 文件类型 | 文件扩展名 | MIME 类型 |
|---------|-----------|-----------|
| JPEG 图像 |.jpeg | image/jpeg |
| PNG 图像 | .png | image/png |
| JPG 图像 | .jpg | image/jpg |
| MP4 视频 | .mp4 | video/mp4 |
| PDF 文档 | .pdf | application/pdf |
| Word 文档 (旧版) | .doc | application/msword |
| Word 文档 (新版) | .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
| Excel 表格 (新版) | .xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
| Excel 表格 (旧版) | .xls | application/vnd.ms-excel |

这个配置允许上传以下类型的文件：
- 图片文件 (JPEG, PNG)
- 视频文件 (MP4)
- PDF 文档
- Microsoft Word 文档 (旧版和新版)
- Microsoft Excel 表格 (旧版和新版)

    const validTypes = [
      'image/jpeg',
      'image/png',
      'image/jpg',
      'application/vnd.ms-excel', //xls
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', //xlsx
      'application/msword', //doc
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document', //docx
      'video/mp4', // mp4
      'application/pdf', //pdf
    ];
    accept="
      image/jpeg,
      image/png,
      image/jpg,
      video/mp4,
      .pdf,application/pdf,
      .doc,application/msword,
      .docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document,
      .xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
      .xls,application/vnd.ms-excel
    "

总结项目中遇到的一些小问题

基于 nodemon 并行 项目启动 和 mock 接口启动