产品更新公告

随着自己做的这个产品愈发的成熟，商业化也在推进，企业级用户越来越多，所以这期twin这边需要单独出个版本的更新公告。

主要点在与在同一设备中同一版本的公告只显示一次，其实可以抽象为同一浏览器。

实现的思路主要是通过package中的版本号加localstorage去实现，因为这边在每次发版时，都会去跟进package中的version的。

这边用的vite去搭建的项目，即在项目构建时，去拿到package中的version,在viteconfig的define选项中暴露出去

但是 这样也会有一个问题 ，就是，在有时会修复某一些线上的问题，那么这时，其实也会更改版本号，一般是后面小数点后一位加一，不过看公司的规范了，这时即使没有重新发版，但也会版本更新公告的显示也会有问题，那么在设置version时处理一下即可，

export default defineConfig(({ mode }) => {
  const getMajorVersion = () => {
    if (process.env.npm_package_version === undefined) {
      return '0.0';
    }
    const p = process.env.npm_package_version.split('.');
    const v = `${p[0]}.${p[1]}`;
    return v;
  };

  return {
    define: {
      __BUILD_DATE__: JSON.stringify(dayjs().format('YYYY-MM-DD HH:mm:ss')),
      __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
      __APP_MAJOR_VERSION__: JSON.stringify(getMajorVersion()),
    },
});

在modal处加一层判断即可

  useEffect(() => {
    if (isExpired) {
      return;
    }
    const ok = localStorage.getItem('easytwin_version');

    if (ok !== __APP_MAJOR_VERSION__) {
      setIsNeedShown(true);
      localStorage.setItem('easytwin_version', __APP_MAJOR_VERSION__);
    } else {
      setIsNeedShown(false);
    }
  }, [isExpired]);