组件库项目

架构类

• ⭐️⭐️⭐️⭐️⭐️ 整体架构：
  我这套叫 dmp-kit，是一个基于 pnpm 的多包组件库，拆成 utils / hooks / ui / ui-business 四个包，分别负责工具函数、通用 Hook、通用组件、业务组件，方便单独发布和升级。

• ⭐️⭐️⭐️⭐️ 构建体系：
  每个包都有独立的 rollup 配置，自动扫描 src 下面的目录生成多入口，打出 es 和 lib 两套格式，再配套输出 .d.ts 类型声明，支持 Tree-shaking 和按需引入。

• ⭐️⭐️⭐️⭐️ 国际化设计：
  我们先在 common 里做了一个通用的 LocaleSetting，然后 UI 层用 React 的 LocaleProvider + useI18n，这样从底层工具到上层组件用的是同一套 t('xxx') 接口，所有文案都能统一切换中英文。

组件 & Hook 抽象

• ⭐️⭐️⭐️⭐️⭐️ 复杂表格组件 ActionSkyTable：
  我基于 Ant Design ProTable 封了一个增强版表格，把筛选、排序、列配置持久化、全屏、自定义过滤、请求节流这些逻辑都拆成了独立的 Hook，然后在组件里组合起来，同时还针对 ProTable 官方的一些 issue 做了兼容处理。

• ⭐️⭐️⭐️⭐️ 批量任务组件 ProgressList：
  对于批量任务执行，我们做了一个 ProgressList 组件，业务只要提供几个服务函数，它就能负责轮询任务进度、列表展示、状态统计、失败详情、CSV 报表下载，以及取消任务的整套交互。

• ⭐️⭐️⭐️ ModalForm + RequestInQuery 双弹窗流程：
  常见的“表单 → 确认本次变更内容 → 真正提交请求”这类流程，我们用 ModalForm 搭配 RequestInQuery 固化成一个双弹窗链路，自动把表单值翻译成可读字典，帮业务统一确认页面的样式和交互。

• ⭐️⭐️⭐️ 权限 Hook usePermission：
  权限这块有个 usePermission，它一方面拉取按钮权限列表，另一方面自动生成每个按钮对应的弹窗状态对象，这样页面只要关心“能不能点”和“哪个弹窗开关”，不需要自己维护一堆 visible 状态。

业务组件与场景

• ⭐️⭐️⭐️⭐️ 标签筛选侧边栏 TagFilterSider：
  像标签筛选这种稍微复杂点的业务，我们做了一个 TagFilterSider，里面把标签列表的获取、排序、折叠/抽屉切换、拖拽宽度、选中状态都封装好了，对外就是一个 getTagList 和一个 onChangeFilterTag。

• ⭐️⭐️⭐️⭐️ 批量任务 + 报表输出场景：
  在大批量操作场景里，我们通过 ProgressList + Download + showRequestError 这一套组合，把“执行过程可视化、失败原因可回溯、结果一键导出报表”都做成了开箱即用的能力。

• ⭐️⭐️⭐️ 跨 tab / 跨项目通信：
  我们在 utils 里还有一个 InterProjectTabCommunication，是基于浏览器 CustomEvent 封装的事件总线，有类型约束，支持注册、批量注册、移除和触发，用来做多 tab 或多前端子项目之间的通信。

工程化与发布

• ⭐️⭐️⭐️⭐️⭐️ 质量保障链路：
  项目统一了 tsconfig.base，开了 strict 模式，配了 ESLint、Prettier、Stylelint，一键 checker 会同时跑 TS 检查、代码规范和样式规范，保证每个包的代码质量一致。

• ⭐️⭐️⭐️⭐️ 发布自动化：
  发包用了一套自定义的 publish.js，会先去私有 registry 查当前最新版本，对比本地版本，自动决定能不能发；然后帮你执行 pnpm publish、更新 dist-tag 为 latest，还会给 git 打 tag 并推到远程，整个流程基本不用手动干预。

• ⭐️⭐️⭐️ 样式打包策略：
  UI 相关的包用 rollup + PostCSS + Less 管线，自动生成独立的 CSS 文件；对 .module.less 做了定向的 CSS Modules 配置，但通过自定义 getLocalIdent 避免产出额外的 json 映射文件，兼顾按需引入和产物简洁。

---

30 秒自我介绍版（你可以背下来的那种）

版本 A（偏总览）

我这边最近在做一套内部的组件库生态，叫 dmp-kit，是基于 pnpm 的多包 monorepo，拆成了 utils、hooks、ui、ui-business几个包，分别负责工具函数、通用 Hook、通用组件、业务组件。
里面比较有代表性的一个是基于 ProTable 封装的 ActionSkyTable，我把筛选、排序、列持久化、全屏、自定义过滤这些复杂逻辑都拆成 Hook 来组合，用来解决 ProTable 在真实项目里频繁请求、reload 丢失、全屏列控制等一系列问题。
工程化这块，每个包都有独立的 rollup 多入口构建，打出 ES/CJS 和类型声明，同时通过一键 checker 跑 TS、ESLint、Stylelint 和 Prettier，再配一套自动对接公司私有源和 git tag 的发布脚本，整体是一个既能沉淀复杂业务场景，又有比较完善工程能力的组件生态。

版本 B（偏“我做了什么”）

在这个项目里我主要做了两块：一块是复杂组件的抽象，比如那个增强版的 ActionSkyTable 和批量任务的 ProgressList，把很多页面级的重复逻辑抽出来做成 Hook 和复用组件；
另一块是把这套东西工程化，包括用 pnpm 管理多包、用 rollup 做多入口打包、统一类型和 lint 配置，还有写了一个发包脚本自动连私有源和打 git tag。
总体目标就是让我们团队后面再做新产品时，可以直接复用这套组件和脚手架，把精力更多放在业务本身上。

如果你愿意，可以把你更想强调的点（比如更偏工程还是更偏业务）告诉我，我可以帮你再改成“问一句答一句”的面试对话稿。