1

vuetemplate2js/demo.js

@@ -0,0 +1,110 @@
+import { createTemplateEditor } from './template-editor.js';
+
+// 示例Vue模板
+const vueTemplate = `
+<template>
+  <div class="container">
+    <header v-if="showHeader" class="header">
+      <h1>{{ title }}</h1>
+      <nav>
+        <a href="#" v-for="link in links" :key="link.id">{{ link.text }}</a>
+      </nav>
+    </header>
+    
+    <main class="content">
+      <section id="intro">
+        <p>这是介绍部分</p>
+      </section>
+      
+      <section id="features">
+        <div v-for="feature in features" :key="feature.id" class="feature-item">
+          <h3>{{ feature.title }}</h3>
+          <p>{{ feature.description }}</p>
+        </div>
+      </section>
+    </main>
+    
+    <footer class="footer">
+      <p>版权信息</p>
+    </footer>
+  </div>
+</template>
+`;
+
+console.log('=== Vue模板编辑器演示 ===\n');
+
+// 1. 创建编辑器实例
+console.log('1. 创建模板编辑器实例...');
+const editor = createTemplateEditor(vueTemplate);
+
+// 2. 查找节点
+console.log('2. 查找特定节点...');
+const headerNodes = editor.findNodes('header');
+const featureItems = editor.findNodes('.feature-item');
+const introSection = editor.findNodes('#intro');
+
+console.log(`找到 ${headerNodes.length} 个header节点`);
+console.log(`找到 ${featureItems.length} 个feature-item节点`);
+console.log(`找到 ${introSection.length} 个intro节点\n`);
+
+// 3. 移动节点示例
+console.log('3. 移动节点示例...');
+if (introSection.length > 0 && featureItems.length > 0) {
+  const intro = introSection[0];
+  
+  // 获取intro的父节点
+  const mainContent = intro.parent;
+  
+  if (mainContent && mainContent.children) {
+    // 查找features节点的位置
+    const featuresIndex = mainContent.children.findIndex(child => 
+      child.tag === 'section' && child.props?.some(p => 
+        p.name === 'id' && p.value?.content === 'features'
+      )
+    );
+    
+    if (featuresIndex !== -1) {
+      editor.moveNode(intro, mainContent, featuresIndex + 1);
+      console.log('✅ 已将intro节点移动到features节点之后\n');
+    }
+  }
+}
+
+// 4. 交换节点示例
+console.log('4. 交换节点示例...');
+if (featureItems.length >= 2) {
+  const firstFeature = featureItems[0];
+  const secondFeature = featureItems[1];
+  
+  editor.swapNodes(firstFeature, secondFeature);
+  console.log('✅ 已交换第一个和第二个feature-item节点的位置\n');
+}
+
+// 5. 修改属性示例
+console.log('5. 修改节点属性示例...');
+if (headerNodes.length > 0) {
+  const header = headerNodes[0];
+  
+  // 修改header的class
+  editor.modifyNodeAttributes(header, {
+    class: 'header modified-header',
+    'data-modified': 'true'
+  });
+  console.log('✅ 已修改header节点的class和属性\n');
+}
+
+// 6. 生成新的模板
+console.log('6. 生成修改后的模板...');
+const newTemplate = editor.generateTemplate();
+
+console.log('=== 修改前的模板 ===');
+console.log(vueTemplate);
+
+console.log('\n=== 修改后的模板 ===');
+console.log(newTemplate);
+
+console.log('\n=== 修改总结 ===');
+console.log('1. 移动了intro节点到features节点之后');
+console.log('2. 交换了前两个feature-item节点的位置');
+console.log('3. 修改了header节点的class和属性');
+console.log('4. 所有Vue指令（v-if、v-for等）都得到了正确处理');