"添加前端模板和运行代码模块"

2026-06-01 13:43:09 +08:00
parent 24045274ad
commit 8092c4b1f8
587 changed files with 99761 additions and 0 deletions
--- a/qiming-vite-plugin-design-mode/examples/basic/index.html
+++ b/qiming-vite-plugin-design-mode/examples/basic/index.html
@@ -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>