feat: align with base project's No ESM design and register global Mindmap component (by AI)

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+test-results/
+.DS_Store

.npmrc

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## v1.0.2 (2026-06-12)
+- **架构对齐**: 遵循 `base` 包新设计，彻底消灭用户侧 ESM 强依赖。
+- **组件注册**: 支持 `<Mindmap>` 全局组件声明式用法。
+- **构建优化**: 产物调整为纯 UMD 模式，通过 `globalThis.Mindmap` 暴露 API。
+
 ## v1.0.0 (2026-05-29)
 - 初始化项目架构。
 - 实现基础渲染占位。

README.md

@@ -1,44 +1,55 @@
-# @web/mindmap
+# @apigo.cc/mindmap API 手册
 
-类 Xmind 体验的思维导图引擎，专注于展示逻辑分支。
+原生 JS 编写的思维导图引擎。支持无限层级、缩放平移、节点折叠及动态增删。
 
-## 特性
+---
-- 原生 ESM 驱动，无需构建即可在浏览器中使用。
-- 支持自动布局算法。
-- 高性能 SVG/DOM 渲染（1000+ 节点渲染耗时 < 50ms）。
-- 支持节点的展开与折叠。
-- 支持画布平移与缩放。
 
-## 安装与使用
+## 1. 引入方式 (UMD 优先)
-本模块不发布至 npmjs。请通过 `loader.js` 或 `importmap` 引入。
 
-### 使用示例
+```html
-```javascript
+<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/mindmap@1.0.1/dist/mindmap.min.js"></script>
-import { Mindmap } from '@web/mindmap';
 
-const mm = new Mindmap({
+<script>
-    container: document.getElementById('app'),
+    // 直接使用全局 Mindmap 类
-    data: {
+    const mm = new Mindmap(config);
-        text: '根节点',
+</script>
-        children: [
-            { text: '子节点 1' },
-            { text: '子节点 2' }
-        ]
-    }
-});
 ```
 
-## API
+---
+
+## 2. 核心用法
+
+### 组件化用法 (推荐)
+直接在 HTML 中使用 `<Mindmap>` 标签，通过 `state` 进行数据绑定。
+
+```html
+<div $data="{ 
+    myMind: { id: 'root', text: '根节点', children: [{ text: '子节点 1' }] }
+}">
+    <Mindmap $.state.data="myMind" style="height:500px"></Mindmap>
+</div>
+```
+
+### JS 调用方式 (兼容)
+...
+---
+
+## 3. API 参考
+
 ### `new Mindmap(options)`
-- `options.container`: HTMLElement, 容器元素。
+- **`container`**: 挂载元素。
-- `options.data`: Object, 树形数据结构。
+- **`data`**: 格式为 `{ id, text, children, _collapsed }` 的对象。
-- `options.nodeWidth`: Number, 节点宽度 (默认 120)。
+- **`nodeWidth / nodeHeight`**: 节点尺寸。
-- `options.nodeHeight`: Number, 节点高度 (默认 40)。
+- **`hGap / vGap`**: 间距。
-- `options.hGap`: Number, 水平间距 (默认 60)。
-- `options.vGap`: Number, 垂直间距 (默认 20)。
 
-### `mm.addNode(parentId, text)`
+### 实例方法
-- 向指定 ID 或文本匹配的节点添加子节点。
+- **`addNode(parentId, text)`**: 动态添加节点。
+- **`removeNode(nodeId)`**: 动态删除节点。
+- **`render()`**: 强制重新布局与重绘。
 
-### `mm.removeNode(nodeId)`
+---
-- 删除指定 ID 或文本匹配的节点。
+
+## 开发者提示 (AI 必读)
+1. **全局变量**: UMD 模式下，`Mindmap` 类自动挂载到 `window`。
+2. **唯一 ID**: 每个节点必须拥有全局唯一的 `id`。
+3. **数据响应**: 修改 `mm.data` 属性后必须手动执行 `mm.render()`。

dist/mindmap.js

@@ -1,3 +1,7 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.ApigoMindmap = {}));
+})(this, function(exports2) {
+  "use strict";
   class Mindmap {
     constructor(options = {}) {
       this.container = options.container;
@@ -200,6 +204,29 @@ class Mindmap {
       this.render();
     }
   }
-export {
+  if (typeof globalThis !== "undefined" && globalThis.Component) {
-  Mindmap
+    globalThis.Component.register("Mindmap", (container) => {
+      let mm = null;
+      const init = () => {
+        container.innerHTML = "";
+        mm = new Mindmap({
+          container,
+          data: container.state.data,
+          nodeWidth: parseInt(container.getAttribute("node-width")) || 120,
+          nodeHeight: parseInt(container.getAttribute("node-height")) || 40,
+          hGap: parseInt(container.getAttribute("h-gap")) || 60,
+          vGap: parseInt(container.getAttribute("v-gap")) || 20
+        });
+        container.mindmapInstance = mm;
       };
+      container.state.__watch("data", (val) => mm ? (mm.data = val, mm.render()) : init());
+      init();
+      container.addEventListener("unload", () => mm = null);
+    });
+  }
+  if (typeof globalThis !== "undefined") {
+    globalThis.Mindmap = Mindmap;
+  }
+  exports2.Mindmap = Mindmap;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});

mindmapTODO.md

@@ -1,16 +1,15 @@
-# mindmapTODO.md
+# mindmap TODO
 
-## 当前版本
+- [x] 架构对齐：Align with `base` project's "No ESM" design.
-- Tag: v1.0.0
+- [ ] 构建配置：Modify `vite.config.js` to output only UMD (`mindmap.js` and `mindmap.min.js`).
-- 下一版本预期: v1.0.1
+- [ ] 源码重构：
+    - [ ] 注册 `Mindmap` 为全局组件 (`globalThis.Component.register`).
+    - [ ] 确保 `Mindmap` 类在 `globalThis` 上可用。
+- [ ] 测试验证：运行 `npm test` 确保功能无损。
+- [ ] 文档更新：
+    - [ ] 更新 `package.json` 版本号。
+    - [ ] 更新 `README.md` 以反映组件化用法。
+    - [ ] 更新 `CHANGELOG.md`。
 
-## 待办事项
+## 当前状态 (v1.0.1)
-- [x] 实现树形数据的自动计算与布局。
+- 1111 个节点渲染耗时: ~40ms (from TEST.md)
-- [x] 支持节点的展开/折叠。
-- [x] 使用 SVG 绘制节点间的连接线。
-- [x] 优化大规模节点下的平移与缩放。
-- [x] 提供节点的动态增删 API。
-
-## 重构建议
-- 考虑引入 `@web/state` 管理节点状态。
-- 使用 Canvas 或高级 SVG 技术优化超大规模树渲染。

package-lock.json

@@ -1,11 +1,11 @@
 {
-	"name": "@web/mindmap",
+	"name": "@apigo.cc/mindmap",
 	"version": "1.0.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "@web/mindmap",
+			"name": "@apigo.cc/mindmap",
 			"version": "1.0.0",
 			"devDependencies": {
 				"@playwright/test": "^1.40.0",

package.json

@@ -1,9 +1,8 @@
 {
   "name": "@apigo.cc/mindmap",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "main": "dist/mindmap.js",
-  "module": "dist/mindmap.js",
   "files": [
     "dist"
   ],

scripts/publish.js

@@ -0,0 +1,48 @@
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+try {
+  // 1. 获取最新 tag
+  let tag;
+  try {
+    tag = execSync('git describe --tags --abbrev=0', { encoding: 'utf8' }).trim();
+  } catch (err) {
+    throw new Error('Failed to find git tags. Please make sure the repository has tags (e.g., v1.0.0) before publishing.');
+  }
+  // 去掉 v 前缀
+  const version = tag.startsWith('v') ? tag.slice(1) : tag;
+
+  console.log(`Latest git tag: ${tag}, Version to publish: ${version}`);
+
+  // 2. 读取并更新 package.json
+  const pkgPath = path.join(__dirname, '../package.json');
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+  
+  // 保持原有名称（如果已经带有 @apigo.cc/ 前缀）或替换前缀
+  if (!pkg.name.startsWith('@apigo.cc/')) {
+    const baseName = pkg.name.includes('/') ? pkg.name.split('/')[1] : pkg.name;
+    pkg.name = `@apigo.cc/${baseName}`;
+  }
+  pkg.version = version;
+
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+  console.log(`Updated package.json: name=${pkg.name}, version=${pkg.version}`);
+
+  // 3. 构建
+  console.log('Running build...');
+  execSync('npm run build', { stdio: 'inherit', cwd: path.join(__dirname, '..') });
+
+  // 4. 发布
+  console.log('Publishing to npm...');
+  const args = process.argv.slice(2).join(' ');
+  execSync(`npm publish --access public ${args}`, { stdio: 'inherit', cwd: path.join(__dirname, '..') });
+
+  console.log('Publish successful!');
+} catch (error) {
+  console.error('Publish failed:', error.message);
+  process.exit(1);
+}

src/index.js

@@ -1,5 +1,5 @@
 /**
- * @web/mindmap
+ * @apigo.cc/mindmap
  * 类 Xmind 体验的思维导图引擎
  */
 
@@ -245,3 +245,33 @@ export class Mindmap {
     this.render();
   }
 }
+
+// 注册为全局组件
+if (typeof globalThis !== 'undefined' && globalThis.Component) {
+    globalThis.Component.register('Mindmap', container => {
+        let mm = null;
+        const init = () => {
+            container.innerHTML = '';
+            mm = new Mindmap({
+                container,
+                data: container.state.data,
+                nodeWidth: parseInt(container.getAttribute('node-width')) || 120,
+                nodeHeight: parseInt(container.getAttribute('node-height')) || 40,
+                hGap: parseInt(container.getAttribute('h-gap')) || 60,
+                vGap: parseInt(container.getAttribute('v-gap')) || 20
+            });
+            container.mindmapInstance = mm;
+        };
+
+        container.state.__watch('data', (val) => mm ? (mm.data = val, mm.render()) : init());
+        
+        init();
+        
+        container.addEventListener('unload', () => mm = null);
+    });
+}
+
+// 挂载到全局
+if (typeof globalThis !== 'undefined') {
+    globalThis.Mindmap = Mindmap;
+}

test/index.html

@@ -10,9 +10,9 @@
     <script type="importmap">
     {
         "imports": {
-            "@web/state": "../../state/src/index.js",
+            "@apigo.cc/state": "../../state/src/index.js",
-            "@web/base": "../../base/src/index.js",
+            "@apigo.cc/base": "../../base/src/index.js",
-            "@web/mindmap": "../src/index.js"
+            "@apigo.cc/mindmap": "../src/index.js"
         }
     }
     </script>
@@ -22,7 +22,7 @@
     <div id="app"></div>
 
     <script type="module">
-        import { Mindmap } from '@web/mindmap';
+        import { Mindmap } from '@apigo.cc/mindmap';
         window.testExports = { Mindmap };
         
         const mm = new Mindmap({

vite.config.js

@@ -5,33 +5,37 @@ import terser from '@rollup/plugin-terser';
 export default defineConfig({
   resolve: {
     alias: {
-      '@web/state': resolve(__dirname, '../state/src/index.js'),
+      '@apigo.cc/state': resolve(__dirname, '../state/src/index.js'),
-      '@web/base': resolve(__dirname, '../base/src/index.js'),
+      '@apigo.cc/base': resolve(__dirname, '../base/src/index.js'),
-      '@web/mindmap': resolve(__dirname, 'src/index.js')
+      '@apigo.cc/mindmap': resolve(__dirname, 'src/index.js')
-    }
-  },
-  server: {
-    fs: {
-      allow: ['..']
     }
   },
   build: {
     lib: {
       entry: resolve(__dirname, 'src/index.js'),
-      name: 'Mindmap',
+      name: 'ApigoMindmap',
-      formats: ['es']
+      formats: ['umd']
     },
     rollupOptions: {
-      external: ['@web/state', '@web/base'],
+      external: ['@apigo.cc/state', '@apigo.cc/base'],
       output: [
         {
-          format: 'es',
+          format: 'umd',
+          name: 'ApigoMindmap',
           entryFileNames: 'mindmap.js',
-          minifyInternalExports: false
+          globals: {
+            '@apigo.cc/state': 'ApigoState',
+            '@apigo.cc/base': 'ApigoBase'
+          }
         },
         {
-          format: 'es',
+          format: 'umd',
+          name: 'ApigoMindmap',
           entryFileNames: 'mindmap.min.js',
+          globals: {
+            '@apigo.cc/state': 'ApigoState',
+            '@apigo.cc/base': 'ApigoBase'
+          },
           plugins: [terser()]
         }
       ]