前言
现在是北京时间 2023 年 12 月 23 日 07:58:35 星期六，心情不错写写作 😎。
正文来了
日记
今天准备去涞水一趟，媳妇儿的老家，与北京房山区交界。我们小区门口有俩药店能直接刷北京医保卡里的钱，这不想着回去买些 OTC 的药嘛，上次老丈人一句“来，刷我医保卡”，整的买药跟逛超市似的。这几天我不是感冒吗，吃药发现家里不是胶囊就是药片，尤其是上周日晚上我发烧了，媳妇儿递给我一个布洛芬胶囊，emm...我放嘴里第一口水没送下去，怎么事儿？
胶囊还在嘴里。然后我心一横，嘎吱嘎吱嚼了，喝水再送，这才下去 😰，我媳妇儿笑了，她说她一口能吃仨 😑。我之前也干过把胶囊拆开、把大药片捣碎冲服的事儿，直接嘎吱嘎吱嚼了还是第一次...干脆回家买些颗粒服用吧，谁让这个这么能吃苦呢🤒
题外音：“你赶紧洗漱啊，晚上不能写？
得，我去洗漱了，准备出门
2023 年 12 月 23 日 23:09:09
今天购了物，吃了火锅，打了篮球，带了娃，跟老友玩了和平精英并吃到了鸡，愉快的周六就这样过完了0.o...
前端那些事儿
今年这形势，项目少的可怜，所以在今年的产品开发过程中，对航天监测 V5.0 做了前端重构（也是因为产品原型的重构），从 vue2 升级到了 vue3+ts，抛弃了多人维护过程中慢慢堆积而成的屎山旧代码。
在需求上，我们对外提供的 SaaS 服务是对用户订购的图层数据进行展示和分析等功能，是以 cesium 三维球为基础的单页面地图应用服务；所有用户可以通过前台导航在页内浏览在线体验模块的示例数据；用户下单后由运营人员在后台系统给用户进行在线 SaaS 服务配置，需要进行实时预览配置后的在线 SaaS 模拟用户端观感（这里要说一下，为什么没有做前台的自主配置，主要是我们面向的用户并不都精通电脑相关软件常识，因此产品设计上，本着减少用户的学习成本的目的，将服务配置放在了后台，由运营小伙伴进行相关配置）。
综上，在架构设计上，航天监测根据业务划分为：主应用 1：前台（导航 + 产品、解决方案介绍 + 在线订购 + 用户服务中心 + 数据服务文档），主应用 2：后台（运营管理），前后台的公共子应用：在线体验服务平台（对前台提供在线 SaaS 服务；对后台提供在线 SaaS 服务配置预览、资源数据预览，达到所见即所得的交互体验）。通过使用 Qiankun 微前端方案，将整个系统拆分为前台主应用、后台主应用和在线体验服务平台子应用三个模块，实现了微服务化的架构。三个模块可以单独开发、测试、部署和扩展提高应用的可扩展性和灵活性，也可以实现子应用的按需加载，减少首屏加载时间，并通过局部刷新和缓存机制提高应用的渲染性能。同时整个系统前端以 Monorepo 的方式管理代码仓库，将多个项目放在一个仓库下，创建公共代码库共享 API 调用实例、公共组件、工程配置、枚举、工具函数、静态资源、样式文件等，多个应用共享代码库也减少了代码重复编写的问题。其中在线体验服务平台作为公共子应用同时为前台主应用和后台主应用提供地图服务支持，一次编码，两头部署，既实现了运营台为用户配置 SaaS 平台时的所见即所得，又方便了后期代码的维护。
这也是我第一次尝试 Monorepo+Qiankun 的这么一个组合，总体来看，效果还是挺理想的，虽然在使用 Qiankun 的过程中爬了一些不算太大的坑，但是后来在做一体化大数据平台时我还是拥抱了原生的 Iframe 集成。
在这次 Monorepo 的首次尝试后，把航天监测架构中公共部分进行了一系列的抽取和精简，做了一个 Sat-Repo（星仓）公共工作空间。
星仓采用 Pnpm 和 Monorepo 方式组织依赖，包含 iconify-api（iconify 图标库 nodejs 服务能力，无网环境私有化部署时使用）、plop（代码生成工具：模板+swagger2ts-gen-cli 自动化生成接口调用类）、eslint-config（全局的 eslint 基础规则）、shared/components（vue3 公共组件模块）、shared/hooks（公共 vue3 函数式方法模块）、shared/style（公共样式模块）、shared/utils（公共工具类模块）等公共部分。
Swagger2ts-Gen-Cli 是一个基于 Swagger 规范自动生成 TypeScript 的工具。它可以根据 Swagger API 文档中的定义，生成 TypeScript 接口和客户端代码，并且支持自定义模板和代码生成选项。使用 Swagger2ts-Gen-Cli 可以节省开发人员大量的时间和精力，使得前后端开发更加高效和协调。
目录结构：
.
├── eslint-config # 全局eslint校验能力
├── iconify-api # iconify图标服务能力
├── plop # 代码生成能力
├── shared # 公共部分
│ ├── components # 公共组件
│ ├── hooks # 公共vue3 hooks函数
│ ├── styles # 公共样式
│ ├── utils # 工具类
├── types # 公共的类型声明文件，可被其他模块的tsconfig.json include
├── web # 前端项目位置
├── ...
├── 其他配置文件
├── ...
使用的时候可以将星仓 clone 到工作目录，然后将任意 vue3 项目复制到星仓的 web 目录下，这样在开发过程中就可以方便地使用星仓中的任何公共部分能力。
欢迎评论
如果大家有什么看法或问题，也可以关注下方我的公众号哦🌟
