110 lines
3.2 KiB
JavaScript
110 lines
3.2 KiB
JavaScript
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等）都得到了正确处理'); |