@melt-js/demo-react-antd 2026.11.12 → 2026.11.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -2,8 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
React + Vite 的 HEL 宿主示例，生产环境从 unpkg 加载远程 React 组件。
|
|
4
4
|
|
|
5
|
+
「查看远程组件」使用具名组件枚举下拉框，并通过 `libs-react-leva` 的 PropsPanel 编辑属性。选择记录在 `#/remote?component=组件名`，下载示例同步使用当前选项。开发时需要启动 `libs-react-leva`（10050）；`pnpm react:dev` 会一起启动四个组件包、四个 demo 和属性面板库。
|
|
6
|
+
|
|
5
7
|
在本包目录执行 `pnpm run publish:stage`，或在仓库根目录执行 `pnpm demo-react-antd:publish:stage`。命令先构建 `dist`，再通过共享发布脚本 `pnpm pack` 处理 workspace 依赖并提交 npm stage。
|
|
6
8
|
|
|
7
9
|
完成 npm 发布后可访问 `https://unpkg.com/@melt-js/demo-react-antd@<version>/dist/index.html`。Vite 的 `base: './'` 保证资源相对于页面加载。
|
|
8
10
|
|
|
9
11
|
四个 demo 依次 stage：`pnpm react:demos:publish:stage`。组件包的发布命令为 `pnpm react:publish:stage`。
|
|
12
|
+
|
|
13
|
+
导航使用 React Router 的 HashRouter，tab、标题和简介统一配置在 `src/router/routes.ts`，布局与 Vue demo 对齐。支持刷新、链接直达和浏览器前进/后退；空路径或未知路径自动跳转到预加载示例。
|
|
14
|
+
|
|
15
|
+
工具栏提供「全屏」和「下载示例」：全屏只展示组件预览，保持组件状态，支持 Esc / 退出按钮，切换路由会自动退出。下载生成可独立打开的 HTML + CDN 文件，需要联网；本地调试页保留本地组件服务地址，组件矩阵包含全部示例，属性面板页包含面板和 schema。
|
|
16
|
+
|
|
17
|
+
示例路径：`#/preload`（预加载）、`#/lazy`（懒加载）、`#/remote`（远程组件）、`#/local`（本地调试）、`#/components`（组件矩阵）。本地调试页需要先启动对应的 comps 开发服务。
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{color-scheme:light;--demo-accent: #1677ff;--demo-accent-soft: #edf5ff;--demo-accent-border: #a8cfff;--demo-text: #1f2329;--demo-muted: #646a73;--demo-border: #e5e6eb;--demo-bg: #f5f7fa;--demo-surface: #fff;font-family:system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{-webkit-text-size-adjust:100%}html body{display:block;margin:0;min-width:320px;min-height:100vh;background:var(--demo-bg);color:var(--demo-text);font-family:system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;text-align:start}html #root{width:100%;max-width:none;margin:0;padding:0;text-align:start}.demo-app,.demo-app *,.demo-app *:before,.demo-app *:after{box-sizing:border-box}.demo-app{display:flex;flex-direction:column;min-height:100vh}.demo-navbar{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--demo-border);background:#fffffff0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.demo-navbar__inner,.demo-navbar__intro,.demo-stage,.demo-footer{width:100%;max-width:1180px;margin:0 auto}.demo-navbar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding:14px 24px 10px}.demo-navbar__brand{display:flex;align-items:center;gap:12px;min-width:0}.demo-navbar__badge{flex:none;padding:5px 10px;border-radius:999px;background:var(--demo-accent-soft);color:var(--demo-accent);font-size:12px;font-weight:700}.demo-navbar__title{margin:0;font-size:16px;line-height:1.3}.demo-navbar__sub{margin:2px 0 0;color:var(--demo-muted);font-size:12px}.demo-navbar__nav{display:flex;flex-wrap:wrap;gap:6px}.demo-nav__link{padding:7px 14px;border:1px solid transparent;border-radius:999px;color:var(--demo-muted);font-size:13px;font-weight:600;text-decoration:none;transition:color .2s,background-color .2s,border-color .2s}.demo-nav__link:hover,.demo-nav__link.is-active{background:var(--demo-accent-soft);color:var(--demo-accent)}.demo-nav__link.is-active{border-color:var(--demo-accent-border)}.demo-nav__link:focus-visible{outline:2px solid var(--demo-accent);outline-offset:2px}.demo-navbar__intro{display:flex;align-items:center;gap:10px;padding:0 24px 12px;color:var(--demo-muted);font-size:12.5px}.demo-navbar__intro-tag{flex:none;padding:2px 8px;border:1px solid var(--demo-border);border-radius:999px;background:var(--demo-surface);color:var(--demo-text);font-size:11px;font-weight:600}.demo-navbar__intro-text{min-width:0;margin:0}.demo-stage{flex:1 0 auto;min-width:0;padding:20px 24px 40px}.demo-stage__hint{margin-bottom:12px;color:var(--demo-muted);font-size:12px;font-weight:600}.demo-stage__hint em{color:var(--demo-accent);font-style:normal}.demo-stage__page{min-width:0;padding:28px 32px;overflow-x:auto;border:1px solid var(--demo-border);border-radius:16px;background:var(--demo-surface);box-shadow:0 1px 2px #1018280a,0 12px 32px -24px #10182859}.demo-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;padding:16px 24px 28px;color:var(--demo-muted);font-size:12px}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.remote-component-picker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px;color:var(--demo-text);font-size:14px}.remote-component-picker select{max-width:100%;min-height:36px;padding:6px 10px;border:1px solid var(--demo-border);border-radius:8px;background:var(--demo-surface);color:inherit;font:inherit}.remote-component-picker select:focus-visible{outline:2px solid var(--demo-accent);outline-offset:2px}.remote-component-hint{color:var(--demo-muted);font-size:13px}.remote-component-preview{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px}.remote-component-preview__stage{flex:1 1 280px;min-width:0}.remote-component-preview__panel{flex:0 1 320px;width:100%;min-width:0}.demo-stage__toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.demo-stage__toolbar .demo-stage__hint{margin-bottom:0}.demo-stage__actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.demo-preview{position:relative;min-width:0}.demo-preview.is-demo-fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147482000;box-sizing:border-box;width:100%;height:100%;margin:0;padding:24px;overflow:auto;overscroll-behavior:contain;background:var(--demo-bg)}.demo-preview__exit{position:fixed;right:20px;bottom:20px;z-index:2147483000;padding:10px 16px;border:1px solid var(--demo-border);border-radius:999px;background:#fffffff5;color:var(--demo-text);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px #1018282e}.screenfull-btn,.download-btn{display:inline-flex;gap:6px;align-items:center;padding:8px 14px;border:1px solid var(--demo-border);border-radius:999px;background:var(--demo-surface);color:var(--demo-text);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}.screenfull-btn svg,.download-btn svg{width:15px;height:15px}.download-btn,.screenfull-btn:hover,.demo-preview__exit:hover{border-color:var(--demo-accent-border);background:var(--demo-accent-soft);color:var(--demo-accent)}.screenfull-btn:focus-visible,.download-btn:focus-visible,.demo-preview__exit:focus-visible{outline:2px solid var(--demo-accent);outline-offset:2px}.download-error{color:#d92d20;font-size:12px}@media(max-width:720px){.demo-navbar__inner,.demo-navbar__intro,.demo-stage,.demo-footer{padding-right:16px;padding-left:16px}.demo-navbar__intro{flex-wrap:wrap;gap:6px}.demo-stage__page{padding:20px 18px}}
|