https://mybatis-flex.com/zh/others/codegen.html#%E7%AE%80%E4%BB%8B 开发纯前端 代码生成器

README.md

@@ -1,10 +1,13 @@
 ---
-title: Flexgen Studio
-emoji: 🏢
-colorFrom: yellow
+title: FlexGen Studio 🚀
+colorFrom: blue
 colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,58 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #1f2937;
+          color: #f9fafb;
+          padding: 3rem 2rem;
+          text-align: center;
+          margin-top: auto;
+        }
+        .footer-content {
+          max-width: 6xl;
+          margin: 0 auto;
+        }
+        .footer-links {
+          display: flex;
+          justify-content: center;
+          gap: 2rem;
+          margin-bottom: 2rem;
+          flex-wrap: wrap;
+        }
+        .footer-links a {
+          color: #d1d5db;
+          text-decoration: none;
+          transition: color 0.2s ease;
+        }
+        .footer-links a:hover {
+          color: #3b82f6;
+        }
+        .copyright {
+          color: #9ca3af;
+          font-size: 0.875rem;
+        }
+        @media (max-width: 768px) {
+          .footer-links {
+            flex-direction: column;
+            gap: 1rem;
+          }
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-links">
+            <a href="#hero">Home</a>
+            <a href="#features">Features</a>
+            <a href="#generator">Generator</a>
+            <a href="https://mybatis-flex.com" target="_blank">Documentation</a>
+            <a href="https://github.com/mybatis-flex" target="_blank">GitHub</a>
+          </div>
+          <p class="copyright">&copy; 2024 FlexGen Studio. Powered by MyBatis Flex. All rights reserved.</p>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,82 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: rgba(255, 255, 255, 0.95);
+          backdrop-filter: blur(10px);
+          border-bottom: 1px solid rgba(229, 231, 235, 0.5);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1000;
+          transition: all 0.3s ease;
+        }
+        .logo { 
+          color: #1f2937; 
+          font-weight: 800; 
+          font-size: 1.5rem;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+        ul { 
+          display: flex; 
+          gap: 2rem; 
+          list-style: none; 
+          margin: 0; 
+          padding: 0; 
+        }
+        a { 
+          color: #4b5563; 
+          text-decoration: none; 
+          font-weight: 500;
+          transition: all 0.2s ease;
+          position: relative;
+        }
+        a:hover { 
+          color: #3b82f6;
+        }
+        a::after {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 2px;
+          bottom: -4px;
+          left: 0;
+          background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+          transition: width 0.3s ease;
+        }
+        a:hover::after {
+          width: 100%;
+        }
+        @media (max-width: 768px) {
+          nav {
+            padding: 1rem;
+            flex-direction: column;
+            gap: 1rem;
+          }
+          ul {
+            gap: 1rem;
+          }
+        }
+      </style>
+      <nav>
+        <div class="logo">FlexGen Studio</div>
+        <ul>
+          <li><a href="#hero">Home</a></li>
+          <li><a href="#features">Features</a></li>
+          <li><a href="#generator">Generator</a></li>
+          <li><a href="https://mybatis-flex.com" target="_blank">Docs</a></li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,159 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FlexGen Studio - MyBatis Flex Code Generator</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+    <custom-navbar></custom-navbar>
+    
+    <!-- Hero Section -->
+    <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden">
+        <div class="absolute inset-0 z-0" id="vanta-bg"></div>
+        <div class="relative z-10 max-w-6xl mx-auto px-4 text-center">
+            <h1 class="text-5xl md:text-7xl font-bold text-gray-800 mb-6">
+                FlexGen Studio
+            </h1>
+            <p class="text-xl md:text-2xl text-gray-600 mb-8">
+                Generate MyBatis Flex Code with Ease 🎯
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <a href="#generator" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
+                    Start Generating
+                </a>
+                <a href="#features" class="border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300">
+                    Learn More
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section id="features" class="py-20 bg-white">
+        <div class="max-w-6xl mx-auto px-4">
+            <h2 class="text-4xl font-bold text-center text-gray-800 mb-16">Why Choose FlexGen Studio?</h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="text-center p-6">
+                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="zap" class="text-blue-600"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4">Lightning Fast</h3>
+                    <p class="text-gray-600">Generate optimized MyBatis Flex code in seconds with our intelligent templates.</p>
+                </div>
+                <div class="text-center p-6">
+                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="code" class="text-green-600"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4">Clean Code</h3>
+                    <p class="text-gray-600">Production-ready, well-structured code following best practices and conventions.</p>
+                </div>
+                <div class="text-center p-6">
+                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="settings" class="text-purple-600"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4">Customizable</h3>
+                    <p class="text-gray-600">Tailor the generated code to your specific project requirements and preferences.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Code Generator Section -->
+    <section id="generator" class="py-20 bg-gray-50">
+        <div class="max-w-6xl mx-auto px-4">
+            <h2 class="text-4xl font-bold text-center text-gray-800 mb-16">Code Generator</h2>
+            <div class="bg-white rounded-2xl shadow-xl p-8">
+                <div class="grid lg:grid-cols-2 gap-8">
+                    <!-- Input Section -->
+                    <div class="space-y-6">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">Database Configuration</label>
+                            <div class="grid grid-cols-2 gap-4">
+                                <input type="text" placeholder="Database URL" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                                <input type="text" placeholder="Username" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">Table Selection</label>
+                            <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                                <option>Select tables to generate...</option>
+                                <option>All tables</option>
+                                <option>Custom selection</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">Output Configuration</label>
+                            <div class="space-y-3">
+                                <label class="flex items-center">
+                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
+                                    <span class="ml-2">Generate Entity Classes</span>
+                                </label>
+                                <label class="flex items-center">
+                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
+                                    <span class="ml-2">Generate Mapper Interfaces</span>
+                                </label>
+                                <label class="flex items-center">
+                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
+                                    <span class="ml-2">Generate Service Classes</span>
+                                </label>
+                            </div>
+                        </div>
+                        <button onclick="generateCode()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-4 px-6 rounded-lg font-semibold text-lg transition-all duration-300 transform hover:scale-105">
+                            Generate Code
+                        </button>
+                    </div>
+
+                    <!-- Output Preview -->
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Generated Code Preview</label>
+                        <div class="bg-gray-900 rounded-lg p-4 h-96 overflow-auto">
+                            <pre id="code-output" class="text-green-400 text-sm font-mono">// Generated code will appear here...</pre>
+                        </div>
+                        <div class="mt-4 flex gap-3">
+                            <button onclick="copyCode()" class="flex-1 bg-gray-600 hover:bg-gray-700 text-white py-3 px-4 rounded-lg font-medium transition-colors">
+                                <i data-feather="copy" class="inline w-4 h-4 mr-2"></i>
+                                Copy Code
+                            </button>
+                            <button onclick="downloadCode()" class="flex-1 bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg font-medium transition-colors">
+                                <i data-feather="download" class="inline w-4 h-4 mr-2"></i>
+                                Download
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <custom-footer></custom-footer>
+
+    <!-- Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Initialize Vanta.js background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            backgroundColor: 0xf8fafc
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,124 @@
+// Shared JavaScript across all pages
+
+// Code generation function
+function generateCode() {
+    const codeOutput = document.getElementById('code-output');
+    
+    // Sample generated code (in real implementation, this would come from API)
+    const sampleCode = `package com.example.entity;
+
+import com.mybatisflex.annotation.Id;
+import com.mybatisflex.annotation.Table;
+import java.time.LocalDateTime;
+
+@Table("user")
+public class User {
+    
+    @Id
+    private Long id;
+    private String username;
+    private String email;
+    private LocalDateTime createTime;
+    private LocalDateTime updateTime;
+    
+    // Getters and Setters
+    public Long getId() { return id; }
+    public void setId(Long id) { this.id = id; }
+    
+    public String getUsername() { return username; }
+    public void setUsername(String username) { this.username = username; }
+    
+    public String getEmail() { return email; }
+    public void setEmail(String email) { this.email = email; }
+    
+    public LocalDateTime getCreateTime() { return createTime; }
+    public void setCreateTime(LocalDateTime createTime) { this.createTime = createTime; }
+    
+    public LocalDateTime getUpdateTime() { return updateTime; }
+    public void setUpdateTime(LocalDateTime updateTime) { this.updateTime = updateTime; }
+}`;
+
+    codeOutput.textContent = sampleCode;
+    codeOutput.classList.add('code-highlight');
+    setTimeout(() => codeOutput.classList.remove('code-highlight'), 2000);
+    
+    // Show success notification
+    showNotification('Code generated successfully!', 'success');
+}
+
+// Copy code to clipboard
+function copyCode() {
+    const codeOutput = document.getElementById('code-output');
+    const textArea = document.createElement('textarea');
+    textArea.value = codeOutput.textContent;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textArea);
+    
+    showNotification('Code copied to clipboard!', 'success');
+}
+
+// Download generated code
+function downloadCode() {
+    const codeOutput = document.getElementById('code-output');
+    const blob = new Blob([codeOutput.textContent], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'MyBatisFlexGeneratedCode.java';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    
+    showNotification('Code downloaded successfully!', 'success');
+}
+
+// Notification system
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.className = `fixed top-4 right-4 z-50 px-6 py-4 rounded-lg shadow-lg transform transition-all duration-300 ${
+        type === 'success' ? 'bg-green-500 text-white' : 
+        type === 'error' ? 'bg-red-500 text-white' : 
+        'bg-blue-500 text-white'
+    }`;
+    notification.textContent = message;
+    
+    document.body.appendChild(notification);
+    
+    // Animate in
+    setTimeout(() => {
+        notification.classList.add('translate-x-0', 'opacity-100');
+    notification.classList.remove('translate-x-full', 'opacity-0');
+    }, 100);
+    
+    // Auto remove after 3 seconds
+    setTimeout(() => {
+        notification.classList.add('translate-x-full', 'opacity-0');
+        setTimeout(() => {
+            if (notification.parentNode) {
+                notification.parentNode.removeChild(notification);
+            }
+        }, 300);
+    }, 3000);
+}
+
+// Initialize app when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('FlexGen Studio loaded successfully!');
+    
+    // Add smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+});

style.css

@@ -1,28 +1,42 @@
+/* Shared styles across all pages */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    scroll-behavior: smooth;
+}
+
+/* Custom scrollbar for code preview */
+#code-output::-webkit-scrollbar {
+    width: 8px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+#code-output::-webkit-scrollbar-track {
+    background: #1f2937;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+#code-output::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+#code-output::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Animation for generated code */
+@keyframes codeHighlight {
+    0% { background-color: rgba(34, 197, 94, 0.3); }
+    100% { background-color: transparent; }
 }
+
+.code-highlight {
+    animation: codeHighlight 2s ease-in-out;
+}
+
+/* Responsive design enhancements */
+@media (max-width: 768px) {
+    .hero-text {
+        font-size: 2.5rem;
+    }
+}