"添加前端模板和运行代码模块"
This commit is contained in:
Codex
78
qiming-vite-plugin-design-mode/examples/basic/index.html
Normal file
78
qiming-vite-plugin-design-mode/examples/basic/index.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Basic AppDev Design Mode Example</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, #74b9ff, #0984e3);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
h1 { color: #2d3748; }
|
||||
.example-box {
|
||||
background: #f7fafc;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.button {
|
||||
background: #4299e1;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
.button:hover {
|
||||
background: #3182ce;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 data-appdev-element="main-title">Basic Design Mode Example</h1>
|
||||
<p data-appdev-element="description">
|
||||
This is a simple HTML example showing how the design mode plugin works.
|
||||
</p>
|
||||
|
||||
<div class="example-box" data-appdev-component="interactive-box">
|
||||
<h2 data-appdev-element="box-title">Interactive Elements</h2>
|
||||
<p data-appdev-element="box-description">
|
||||
Click the buttons below to test the design mode functionality.
|
||||
</p>
|
||||
<button class="button" data-appdev-action="primary">Primary Button</button>
|
||||
<button class="button" data-appdev-action="secondary">Secondary Button</button>
|
||||
<button class="button" data-appdev-action="danger">Danger Button</button>
|
||||
</div>
|
||||
|
||||
<div class="example-box" data-appdev-component="content-section">
|
||||
<h3 data-appdev-element="content-title">Content Section</h3>
|
||||
<p data-appdev-element="content-text">
|
||||
This section contains various HTML elements for testing source mapping.
|
||||
</p>
|
||||
<ul data-appdev-element="feature-list">
|
||||
<li data-appdev-item="feature-1">Source mapping works with vanilla HTML</li>
|
||||
<li data-appdev-item="feature-2">Plugin adds data attributes automatically</li>
|
||||
<li data-appdev-item="feature-3">No React or framework required</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
171
qiming-vite-plugin-design-mode/examples/basic/main.js
Normal file
171
qiming-vite-plugin-design-mode/examples/basic/main.js
Normal file
@@ -0,0 +1,171 @@
|
||||
// Basic JavaScript example for AppDev Design Mode plugin
|
||||
console.log('AppDev Design Mode Plugin - Basic Example Loaded');
|
||||
|
||||
// Sample data for the application
|
||||
const sampleData = {
|
||||
features: [
|
||||
'No framework required',
|
||||
'Works with vanilla HTML',
|
||||
'Automatic source mapping',
|
||||
'Lightweight and fast',
|
||||
],
|
||||
actions: {
|
||||
primary: 'Primary action triggered',
|
||||
secondary: 'Secondary action triggered',
|
||||
danger: 'Danger action triggered',
|
||||
},
|
||||
};
|
||||
|
||||
// Interactive functionality
|
||||
function initializeApp() {
|
||||
console.log('Initializing basic app...');
|
||||
|
||||
// Add event listeners to buttons
|
||||
const buttons = document.querySelectorAll('[data-appdev-action]');
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('click', handleButtonClick);
|
||||
});
|
||||
|
||||
// Add click handlers to list items
|
||||
const listItems = document.querySelectorAll('[data-appdev-item]');
|
||||
listItems.forEach((item, index) => {
|
||||
item.addEventListener('click', () => handleListItemClick(item, index));
|
||||
});
|
||||
|
||||
// Simulate dynamic content addition
|
||||
addDynamicContent();
|
||||
}
|
||||
|
||||
function handleButtonClick(event) {
|
||||
const action = event.target.getAttribute('data-appdev-action');
|
||||
const message = sampleData.actions[action] || 'Unknown action';
|
||||
|
||||
console.log(`Button clicked: ${action}`);
|
||||
|
||||
// Visual feedback
|
||||
event.target.style.background = '#48bb78';
|
||||
setTimeout(() => {
|
||||
event.target.style.background = '#4299e1';
|
||||
}, 200);
|
||||
|
||||
showNotification(message);
|
||||
}
|
||||
|
||||
function handleListItemClick(item, index) {
|
||||
console.log(`List item clicked: ${item.textContent}`);
|
||||
|
||||
// Visual feedback
|
||||
item.style.background = '#e6fffa';
|
||||
setTimeout(() => {
|
||||
item.style.background = '';
|
||||
}, 300);
|
||||
|
||||
showNotification(`Clicked: ${item.textContent}`);
|
||||
}
|
||||
|
||||
function addDynamicContent() {
|
||||
const contentSection = document.querySelector(
|
||||
'[data-appdev-component="content-section"]'
|
||||
);
|
||||
if (!contentSection) return;
|
||||
|
||||
const dynamicDiv = document.createElement('div');
|
||||
dynamicDiv.setAttribute('data-appdev-component', 'dynamic-content');
|
||||
dynamicDiv.setAttribute('data-dynamic', 'true');
|
||||
dynamicDiv.innerHTML = `
|
||||
<h4 data-appdev-element="dynamic-title">Dynamically Added Content</h4>
|
||||
<p data-appdev-element="dynamic-description">
|
||||
This content was added dynamically after page load.
|
||||
</p>
|
||||
<button class="button" data-appdev-action="dynamic" data-dynamic-button="true">
|
||||
Dynamic Button
|
||||
</button>
|
||||
`;
|
||||
|
||||
contentSection.appendChild(dynamicDiv);
|
||||
|
||||
// Add event listener to new button
|
||||
const newButton = dynamicDiv.querySelector('[data-appdev-action="dynamic"]');
|
||||
newButton.addEventListener('click', event => {
|
||||
console.log('Dynamic button clicked');
|
||||
showNotification('Dynamic action triggered!');
|
||||
event.target.style.background = '#ed8936';
|
||||
setTimeout(() => {
|
||||
event.target.style.background = '#4299e1';
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
|
||||
function showNotification(message) {
|
||||
// Remove existing notification
|
||||
const existing = document.querySelector('.notification');
|
||||
if (existing) {
|
||||
existing.remove();
|
||||
}
|
||||
|
||||
// Create new notification
|
||||
const notification = document.createElement('div');
|
||||
notification.className = 'notification';
|
||||
notification.textContent = message;
|
||||
notification.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #48bb78;
|
||||
color: white;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
z-index: 1000;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Auto remove after 3 seconds
|
||||
setTimeout(() => {
|
||||
notification.style.animation = 'slideOut 0.3s ease-in';
|
||||
setTimeout(() => {
|
||||
if (notification.parentNode) {
|
||||
notification.parentNode.removeChild(notification);
|
||||
}
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Add CSS animations
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOut {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize when DOM is loaded
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initializeApp);
|
||||
} else {
|
||||
initializeApp();
|
||||
}
|
||||
|
||||
// Log plugin status
|
||||
console.log('AppDev Design Mode Plugin: Basic example ready for testing');
|
||||
13
qiming-vite-plugin-design-mode/examples/basic/package.json
Normal file
13
qiming-vite-plugin-design-mode/examples/basic/package.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "vite-plugin-appdev-design-mode-basic-example",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^5.0.0"
|
||||
}
|
||||
}
|
||||
13
qiming-vite-plugin-design-mode/examples/basic/vite.config.ts
Normal file
13
qiming-vite-plugin-design-mode/examples/basic/vite.config.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import appdevDesignMode from '../../packages/plugin/src/index';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
appdevDesignMode({
|
||||
verbose: true,
|
||||
attributePrefix: 'data-appdev'
|
||||
})
|
||||
]
|
||||
});
|
||||
Reference in New Issue
Block a user