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

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/advanced/src/App.tsx
+++ b/qiming-vite-plugin-design-mode/examples/advanced/src/App.tsx
@@ -0,0 +1,119 @@
+import React, { Suspense } from 'react';
+import { Routes, Route, Link, useLocation } from 'react-router-dom';
+import { useAppStore } from './store/appStore';
+
+// 页面组件
+const Dashboard = React.lazy(() => import('./pages/Dashboard'));
+const ComponentShowcase = React.lazy(() => import('./pages/ComponentShowcase'));
+const InteractiveDemo = React.lazy(() => import('./pages/InteractiveDemo'));
+const ConfigurationGuide = React.lazy(() => import('./pages/ConfigurationGuide'));
+
+// 通用组件
+const LoadingSpinner: React.FC = () => (
+  <div style={{
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '2rem'
+  }}>
+    <div style={{
+      width: '40px',
+      height: '40px',
+      border: '3px solid #f3f3f3',
+      borderTop: '3px solid #3498db',
+      borderRadius: '50%',
+      animation: 'spin 1s linear infinite'
+    }} />
+    <style>{`
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    `}</style>
+  </div>
+);
+
+const Navigation: React.FC = () => {
+  const location = useLocation();
+  const { theme, toggleTheme } = useAppStore();
+
+  const navItems = [
+    { path: '/', label: 'Dashboard', icon: '🏠' },
+    { path: '/showcase', label: 'Component Showcase', icon: '🎨' },
+    { path: '/interactive', label: 'Interactive Demo', icon: '🎯' },
+    { path: '/config', label: 'Configuration', icon: '⚙️' }
+  ];
+
+  return (
+    <nav className={`nav ${theme}`} data-component="navigation">
+      <div className="nav-brand" data-element="brand">
+        <h1>Advanced Design Mode</h1>
+        <span className="version">v1.0.0</span>
+      </div>
+      
+      <div className="nav-links" data-element="nav-links">
+        {navItems.map(item => (
+          <Link
+            key={item.path}
+            to={item.path}
+            className={`nav-link ${location.pathname === item.path ? 'active' : ''}`}
+            data-nav-item={item.path.replace('/', '') || 'dashboard'}
+          >
+            <span className="icon">{item.icon}</span>
+            <span className="label">{item.label}</span>
+          </Link>
+        ))}
+      </div>
+      
+      <div className="nav-actions" data-element="actions">
+        <button 
+          className="theme-toggle"
+          onClick={toggleTheme}
+          data-action="toggle-theme"
+          title="Toggle theme"
+        >
+          {theme === 'light' ? '🌙' : '☀️'}
+        </button>
+      </div>
+    </nav>
+  );
+};
+
+const App: React.FC = () => {
+  const { isLoading, error } = useAppStore();
+
+  if (error) {
+    return (
+      <div className="app-error">
+        <h1>Application Error</h1>
+        <p>{error}</p>
+        <button onClick={() => window.location.reload()}>
+          Reload Application
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`app ${useAppStore.getState().theme}`} data-app="advanced-demo">
+      <Navigation />
+      
+      <main className="main-content" data-component="main">
+        <Suspense fallback={<LoadingSpinner />}>
+          <Routes>
+            <Route path="/" element={<Dashboard />} />
+            <Route path="/showcase" element={<ComponentShowcase />} />
+            <Route path="/interactive" element={<InteractiveDemo />} />
+            <Route path="/config" element={<ConfigurationGuide />} />
+          </Routes>
+        </Suspense>
+      </main>
+      
+      <footer className="app-footer" data-component="footer">
+        <p>Built with Vite + React + TypeScript + AppDev Design Mode Plugin</p>
+      </footer>
+    </div>
+  );
+};
+
+export default App;