@cdfrd/publish-notification-plugin 0.1.2 → 0.1.4

package/README.md

@@ -29,20 +29,31 @@ createUpdateNotice()
 
 ## 微前端（qiankun）
 
-每个应用各自接入 `vitePluginVersion()` + `createUpdateNotice`；Host 同步 `setActiveApp`。
+每个子应用各自接入 `vitePluginVersion()` + `createUpdateNotice`；Host 同步 `setActiveApp`。
 
 ```ts
-// host/main.ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { vitePluginVersion } from '@cdfrd/publish-notification-plugin/vite'
+
+export default defineConfig({
+  plugins: [vitePluginVersion()],
+})
+```
+
+```ts
+// 主应用： host/main.ts
 import { createUpdateNotice, getUpdateNotice } from '@cdfrd/publish-notification-plugin'
 
 createUpdateNotice({
   microApp: { enabled: true, appId: 'host' },
-  // 纯壳 Host：disableNotification: true,
+  // 主应用纯壳(可选)：disableNotification: true,
 })
 
 registerMicroApps(apps, {
   beforeMount: [
     (app) => {
+      // 激活子应用(插件只检查激活子应用是否有版本，不检查其他子应用)
       getUpdateNotice()?.setActiveApp(app.name)
       return Promise.resolve()
     },
@@ -51,21 +62,151 @@ registerMicroApps(apps, {
 ```
 
 ```ts
-// order/main.ts
+// 子应用：order/main.ts
 createUpdateNotice({
   microApp: { enabled: true, appId: 'order-center' },
 })
 ```
 
+
+
 ## 事后切换语言 / 主题
 
 ```ts
 import { getUpdateNotice } from '@cdfrd/publish-notification-plugin'
 
 getUpdateNotice()?.setLocale('en_US')
+// 如果是 Antd UI  4.x + 5.x +6.x ，可以不用写下面这行
+// Antd主题会自动适配，不需要额外配置
 getUpdateNotice()?.setTheme('dark')
 ```
 
+
+
+## `UpdateNoticeOptions`
+
+`createUpdateNotice(options?)` 的运行时配置。
+
+
+| 字段                    | 类型                   | 默认                 | 说明                                                                                                                                                      |
+| --------------------- | -------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `versionBase`         | `string`             | 自动推导               | `version.json` URL 前缀，最终请求 `{versionBase}update-notice/version.json`。优先级：显式 `versionBase` → Vite `import.meta.env.BASE_URL` → `''`。非根路径 / CDN 部署时建议显式配置 |
+| `check`               | `CheckConfig`        | 见下表                | 版本检查触发策略                                                                                                                                                |
+| `microApp`            | `MicroAppConfig`     | —                  | 微前端场景配置                                                                                                                                                 |
+| `themeAdapter`        | `ThemeAdapterConfig` | `{ type: 'antd' }` | 默认 UI 主题适配                                                                                                                                              |
+| `placement`           | `'topLeft'           | 'topRight'         | 'bottomLeft'                                                                                                                                            |
+| `forcedUpdate`        | `boolean`            | `false`            | `true` 时强制更新：无「稍后」/关闭，展示倒计时与「立即刷新」，倒计时结束自动刷新；页面无遮罩仍可操作                                                                                                  |
+| `locale`              | `LocaleConfig`       | —                  | 按语言覆盖内置通知文案；整站当前语言由 `setLocale` 控制，内置默认 `zh_CN`                                                                                                         |
+| `disableNotification` | `boolean`            | `false`            | `true` 时完全关闭该应用的检查 / 默认 UI / `web_update_notice`。纯壳 Host 常用。与 `hiddenDefaultNotice` **互斥**，不得同时为 `true`                                                 |
+| `hiddenDefaultNotice` | `boolean`            | `false`            | `true` 时关闭默认 UI，仍检查并派发 `web_update_notice`，供业务自定义 UI。与 `disableNotification` **互斥**，不得同时为 `true`                                                        |
+
+
+通知模式三选一：两者均不开启（默认 UI）/ 仅 `disableNotification` / 仅 `hiddenDefaultNotice`。
+
+### `check`
+
+
+| 字段                | 类型        | 默认               | 说明                             |
+| ----------------- | --------- | ---------------- | ------------------------------ |
+| `interval`        | `number`  | `10 * 60 * 1000` | 轮询间隔（毫秒）；`<= 0` 不轮询            |
+| `onWindowActive`  | `boolean` | `true`           | 窗口重新获得焦点时检查                    |
+| `onTabVisible`    | `boolean` | `true`           | 标签页从隐藏变为可见时检查                  |
+| `onResourceError` | `boolean` | `true`           | 静态资源加载失败时检查（用于发现发版后旧 chunk 失效） |
+
+
+
+
+### `microApp`
+
+
+| 字段        | 类型        | 默认  | 说明                                          |
+| --------- | --------- | --- | ------------------------------------------- |
+| `enabled` | `boolean` | —   | 是否启用微前端口径；为 `true` 时需配合 Host `setActiveApp` |
+| `appId`   | `string`  | —   | 当前应用 ID；仅当该 ID 为 active app 时才会检查 / 通知      |
+
+
+
+
+### `themeAdapter`
+
+
+| 字段             | 类型      | 默认                               | 说明       |
+| -------------- | ------- | -------------------------------- | -------- |
+| `type`         | `'antd' | 'cssVariable'`                   | `'antd'` |
+| `primaryColor` | `string | { light: string; dark: string }` | —        |
+
+
+
+
+### `locale`
+
+按语言覆盖文案，键为 `'zh_CN' | 'en_US'`，值为部分字段：
+
+
+| 字段                  | 说明         |
+| ------------------- | ---------- |
+| `title`             | 通知标题       |
+| `description`       | 可选更新时的说明文案 |
+| `buttonText`        | 「立即刷新」按钮文案 |
+| `dismissButtonText` | 「稍后」按钮文案   |
+| `forcedDescription` | 强制更新正文     |
+
+
+```ts
+createUpdateNotice({
+  versionBase: '/admin/',
+  check: { interval: 5 * 60 * 1000 },
+  placement: 'bottomRight',
+  forcedUpdate: false,
+  themeAdapter: { type: 'antd' },
+  locale: {
+    zh_CN: { title: '发现新版本', buttonText: '立即刷新' },
+    en_US: { title: 'Update available', buttonText: 'Refresh' },
+  },
+})
+```
+
+
+
+## `VersionPluginOptions`
+
+构建侧配置，传给 `vitePluginVersion(options?)` / `defaultPluginVersion(options?)`。只生成 `{outDir}/update-notice/version.json`，不注入 HTML / 脚本。Runtime **不**配置这些字段。
+
+
+| 字段            | 类型           | 默认          | 说明                                                                                                                                   |
+| ------------- | ------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `versionType` | `'timestamp' | 'gitcommit' | 'version'`                                                                                                                           |
+| `outDir`      | `string`     | 见下          | 产物根目录，最终写出 `{outDir}/update-notice/version.json`。`vitePluginVersion` 未配置时读 Vite `build.outDir`；`defaultPluginVersion` 未配置时为 `'dist'` |
+
+
+
+
+### `versionType`
+
+
+| 值           | 说明                                                            |
+| ----------- | ------------------------------------------------------------- |
+| `timestamp` | 构建时间戳（`Date.now()`），默认推荐                                      |
+| `gitcommit` | 短 Git Commit（`git rev-parse --short HEAD`）；获取失败时降级为 timestamp |
+| `version`   | 当前 `package.json` 的 `version`；获取失败时降级为 timestamp              |
+
+
+```ts
+// vite.config.ts
+vitePluginVersion({
+  versionType: 'gitcommit',
+  // outDir 一般可省略，自动用 Vite build.outDir
+})
+
+// 其他构建工具
+await defaultPluginVersion({
+  versionType: 'version',
+  outDir: 'build',
+})
+```
+
+
+
 ## 本地示例
 
 ```bash
@@ -74,4 +215,4 @@ pnpm build
 pnpm dev:vite   # Host http://localhost:7100 · 单体 http://localhost:7103
 ```
 
-更多示例见 [docs/examples.md](./docs/examples.md)。
+更多示例见 [docs/examples.md](./docs/examples.md)。

package/dist/index.cjs

@@ -317,6 +317,7 @@ var UpdateNoticeRuntime = class {
     const check = this.options.check ?? {};
     const checkInterval = check.interval ?? DEFAULT_CHECK_INTERVAL;
     const onWindowActive = check.onWindowActive !== false;
+    const onTabVisible = check.onTabVisible !== false;
     const onResourceError = check.onResourceError !== false;
     const checkImmediately = !this.options.microApp?.enabled;
     const run = () => this.checkUpdate();
@@ -335,7 +336,7 @@ var UpdateNoticeRuntime = class {
       if (document.visibilityState === "visible") {
         startPolling();
         flushPending();
-        if (onWindowActive) run();
+        if (onTabVisible) run();
       } else if (this.intervalId) {
         clearInterval(this.intervalId);
         this.intervalId = void 0;
@@ -397,7 +398,7 @@ var PRESET_LOCALE = {
 };
 function resolveNotificationCopy(options, locale) {
   const builtin = PRESET_LOCALE[locale] ?? PRESET_LOCALE.zh_CN;
-  const fromData = options.locale?.data?.[locale] ?? {};
+  const fromData = options.locale?.[locale] ?? {};
   return {
     title: fromData.title ?? builtin.title,
     description: fromData.description ?? builtin.description,
@@ -417,8 +418,8 @@ var DEFAULT_NOTICE_CSS = `
   --update-icon-color: rgba(0, 0, 0, 0.45);
   --update-icon-hover: rgba(0, 0, 0, 0.88);
   --update-btn-hover-bg: rgba(0, 0, 0, 0.06);
-  --update-primary: #1677ff;
-  --update-primary-hover: #4096ff;
+  --update-primary: #4096ff;
+  --update-primary-hover: #69b1ff;
   --update-mask: rgba(0, 0, 0, 0.45);
   --update-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
     0 9px 28px 8px rgba(0, 0, 0, 0.05);
@@ -431,8 +432,8 @@ var DEFAULT_NOTICE_CSS = `
   --update-icon-color: rgba(255, 255, 255, 0.45);
   --update-icon-hover: rgba(255, 255, 255, 0.85);
   --update-btn-hover-bg: rgba(255, 255, 255, 0.08);
-  --update-primary: #1668dc;
-  --update-primary-hover: #3c89e8;
+  --update-primary: #3c89e8;
+  --update-primary-hover: #65a9f3;
   --update-mask: rgba(0, 0, 0, 0.65);
   --update-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),
     0 9px 28px 8px rgba(0, 0, 0, 0.2);
@@ -450,7 +451,7 @@ var DEFAULT_NOTICE_CSS = `
 }
 
 .cdfrd-update-notice:not(.cdfrd-update-notice--forced) {
-  width: 340px;
+  width: 316px;
 }
 
 .cdfrd-update-notice-panel {
@@ -472,6 +473,9 @@ var DEFAULT_NOTICE_CSS = `
   font-weight: 600;
   line-height: 1.5;
   color: var(--update-text);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .cdfrd-update-notice-desc {
@@ -480,6 +484,11 @@ var DEFAULT_NOTICE_CSS = `
   font-size: 14px;
   line-height: 1.5714;
   color: var(--update-text-secondary);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* Close \u2014 slightly larger than default antd notice close */
@@ -526,7 +535,10 @@ var DEFAULT_NOTICE_CSS = `
   border-radius: 4px;
   background: transparent;
   box-sizing: border-box;
+  max-width: 120px;
+  overflow: hidden;
   white-space: nowrap;
+  text-overflow: ellipsis;
   transition: all 0.2s;
 }
 
@@ -573,7 +585,7 @@ var DEFAULT_NOTICE_CSS = `
 
 .cdfrd-update-notice--forced .cdfrd-update-notice-panel {
   width: max-content;
-  max-width: min(360px, calc(100vw - 48px));
+  max-width: min(336px, calc(100vw - 48px));
   padding: 20px 24px;
 }
 
@@ -732,9 +744,9 @@ function tryResolveAntdPrimaryColor(options) {
 }
 function resolveCssVariablePrimary(config, theme) {
   const primary = config?.primaryColor;
-  if (!primary) return DEFAULT_PRIMARY_COLOR;
+  if (!primary) return "";
   if (typeof primary === "string") return primary;
-  return primary[theme] || primary.light || DEFAULT_PRIMARY_COLOR;
+  return primary[theme] || primary.light || "";
 }
 function scheduleFrame(cb) {
   if (typeof requestAnimationFrame === "function") {
@@ -1040,10 +1052,45 @@ function el(tag, className, text) {
   if (text !== void 0) node.textContent = text;
   return node;
 }
+function lightenPrimaryForHover(primary, amount = 0.22) {
+  const trimmed = primary.trim();
+  const hex = trimmed.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  let r;
+  let g;
+  let b;
+  if (hex) {
+    const h = hex[1];
+    if (h.length === 3) {
+      r = parseInt(h[0] + h[0], 16);
+      g = parseInt(h[1] + h[1], 16);
+      b = parseInt(h[2] + h[2], 16);
+    } else {
+      r = parseInt(h.slice(0, 2), 16);
+      g = parseInt(h.slice(2, 4), 16);
+      b = parseInt(h.slice(4, 6), 16);
+    }
+  } else {
+    const rgb = trimmed.match(
+      /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*[\d.]+)?\s*\)$/i
+    );
+    if (!rgb) return primary;
+    r = Number(rgb[1]);
+    g = Number(rgb[2]);
+    b = Number(rgb[3]);
+  }
+  const mix = (c) => Math.round(c + (255 - c) * amount);
+  const toHex = (c) => mix(c).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
 function applyPrimaryToNode(node, primary) {
-  if (!primary) return;
-  node.style.setProperty("--update-primary", primary);
-  node.style.setProperty("--update-primary-hover", primary);
+  const el2 = node;
+  if (!primary) {
+    el2.style.removeProperty("--update-primary");
+    el2.style.removeProperty("--update-primary-hover");
+    return;
+  }
+  el2.style.setProperty("--update-primary", primary);
+  el2.style.setProperty("--update-primary-hover", lightenPrimaryForHover(primary));
 }
 function applyTheme(theme) {
   ensureDefaultStyles();
@@ -1104,14 +1151,14 @@ function showDefaultNotice(options) {
   const placement = options.options.placement ?? "topRight";
   const forced = options.options.forcedUpdate === true;
   const theme = options.theme ?? "light";
-  const primary = options.primaryColor || currentPrimary;
+  const primary = options.primaryColor ?? currentPrimary;
   const wrap = document.createElement("div");
   wrap.className = forced ? "cdfrd-update-notice cdfrd-update-notice--forced" : "cdfrd-update-notice";
   wrap.setAttribute("data-update-notice-theme", theme);
   if (!forced) {
     wrap.style.cssText = PLACEMENT_STYLES[placement] ?? PLACEMENT_STYLES.topRight;
   }
-  if (primary) applyPrimaryToNode(wrap, primary);
+  applyPrimaryToNode(wrap, primary);
   const panel = el("div", "cdfrd-update-notice-panel");
   if (forced) {
     panel.appendChild(el("div", "cdfrd-update-notice-title", copy.forcedTitle));
@@ -1196,7 +1243,6 @@ var UpdateNoticeManager = class _UpdateNoticeManager {
     validateOptions(options);
     if (isFirstCreate) {
       this.themeAdapter = options.themeAdapter;
-      if (options.locale?.default) this.locale = options.locale.default;
       applyTheme(this.theme);
       this.startThemeWatch();
     }