@sx-zhonghe/common

@sx-zhonghe/common

微前端项目公共库，包含工具函数、权限模块、国际化、Vue 组件等。

安装

pnpm add @sx-zhonghe/common

使用

import { propTypes, download, Menu } from '@sx-zhonghe/common'
import { dateFormatter } from '@sx-zhonghe/common/formatTime'
import { handleTree } from '@sx-zhonghe/common/tree'
import { getAccessToken } from '@sx-zhonghe/common/utils/auth'
import { loadLocaleMessage } from '@sx-zhonghe/common/locales/loadLocaleMessage'

发布到 npm

在 packages 目录：

pnpm build
pnpm pub:common

详见 npm 发布指南。

各应用引用方式

Monorepo 本地开发（当前）：

"@sx-zhonghe/common": "workspace:^"

独立仓库 / npm 发布后：

"@sx-zhonghe/common": "^1.0.0"

然后执行 pnpm install。

说明

• 包内 config/axios/config.ts 依赖消费方 Vite 环境的 import.meta.env
• WelcomeHome、AnalysisDashboard 组件依赖消费方应用的 @/ 别名，需由宿主应用 Vite 编译
• 消费方需在 vite.config.ts 中将 @/types/* 指向 node_modules/@sx-zhonghe/common/src/types/*

列表列配置（自 1.2.0 提供）

StatusListTable 可选接收 columns，并通过 columnSettings 事件打开宿主注册的独立页。 不传 columns 的旧列表保持原有插槽用法，不显示配置入口。 也可使用下述 columnPreferences 接入现有插槽列。

<StatusListTable :columns="columns" :data="list" :loading="loading" :status-options="[]"
  @column-settings="openSettings">
  <template #column-status="{ row }"><span>{{ row.status }}</span></template>
  <!-- 操作列继续放默认插槽，固定在右侧，不参与个人列配置 -->
  <el-table-column label="操作" fixed="right">...</el-table-column>
</StatusListTable>

• 每个业务列定义稳定且唯一的 key、label；可选 prop、宽度、对齐方式、formatter。
• 表头同名的字段可用 settingsLabel 指定配置页名称，表格继续使用原来的 label。
• 特殊单元格使用 column-字段key 具名插槽，普通列沿用 Element Plus 默认渲染。
• 列表和设置页共用同一份列定义及 useListColumnPreferences(definitions, scope)。 scope 包含 tenantId、userId、appKey、tableKey，支持传入 computed。 自 1.2.4 起，配置改用 v2 账号键，tenantId 仅用于读取旧配置，不再隔离新配置。 主应用首次加载登录用户时记录 zhonghe:account-session:id，切换租户成员不覆盖； 未接入主应用的独立页面回退使用 scope.userId。旧 v1 配置在首次读取时迁移，已有 v2 配置优先。 主应用登出、登录前及版本更新清理应保留 zhonghe:list-columns: 前缀的数据， 账号会话标识仍随登出删除，防止下一次登录串用其他账号配置。
• hook 返回 columns（显示列）、settings（全部列）、reload()、save(preferences)。 来源列表在 onActivated 调用 reload()；设置页通过 ListColumnSettings 编辑草稿， 处理 save、cancel、back 事件。保存异常由宿主展示，不关闭页面。
• 仅保存列 key、顺序、显隐，存入 localStorage，无过期时间；不保存字段名称或业务数据。 换浏览器或清理网站数据后恢复默认。
• 新字段默认显示，插入默认顺序中前一字段之后；已有字段之间的个人顺序保持不变。 已删除字段被忽略，同 key 改名继承配置。至少保留一个显示字段。
• 路由、来源列表 keep-alive、页签关闭和返回由宿主按既有规范接入；公共组件不持有业务路由。
• 配置页按左列到右列连续排序，两列平均分配字段；窄屏上下排列。 页面按实际可用视口固定高度，仅字段区滚动，底部取消和保存始终可见。

纯逻辑回归：node --experimental-strip-types --test packages/common/tests/list-columns.test.mjs（packages 根目录）。

原生表格迁移（1.2.2）

StatusListTable 的默认插槽继续接收原有 el-table-column，row-key、树属性、 合并单元格、行事件和选择事件透传给 Element Plus 表格。 表格 ref 支持 doLayout()、toggleRowSelection()、toggleRowExpansion()。 已有外部工具栏或明细表使用 :show-toolbar="false"；原先固定高度或自适应高度的明细表 可传 :max-height="null"，避免公共列表默认最大高度改变原有布局。 百分比宽度、flex 等容器样式只在外层应用一次；分页放在 #pagination 插槽。

现有插槽列的排序与显隐（1.2.3）

原有列含有行内编辑、字典或自定义事件时，可以保留全部 el-table-column 插槽， 给业务列添加稳定的 column-key，并传入 hook 返回的完整 settings：

<StatusListTable :data="list" :column-preferences="settings" @column-settings="openSettings">
  <el-table-column type="selection" />
  <el-table-column column-key="name" label="名称" prop="name" />
  <el-table-column column-key="status" label="状态">
    <template #default="{ row }"><dict-tag :value="row.status" /></template>
  </el-table-column>
  <el-table-column label="操作" fixed="right">...</el-table-column>
</StatusListTable>

未配置 column-key 的选择、序号、展开和操作列保持原位。业务列的插槽、指令、 属性和事件保持原样；个人排序改变后，业务列原有的固定位置随个人顺序调整。 columnPreferences 同时显示列表调整入口，适用于已有外部工具栏的列表。 useListColumnPreferences 的列定义也支持 computed/ref，用于统计日期等动态列。