feat: add interactive demos for AI history, Auth design, and Git intro

2026-01-19 11:25:10 +08:00
parent bb28f010e3
commit 7d86ba9504
55 changed files with 12984 additions and 5776 deletions
@@ -0,0 +1,144 @@
+// auth-design 公共样式配置
+export const commonStyles = {
+  // 容器样式
+  container: {
+    base: 'auth-demo-container',
+    classes: {
+      border: '1px solid var(--vp-c-divider)',
+      background: 'var(--vp-c-bg-soft)',
+      borderRadius: '12px',
+      padding: '1.5rem',
+      margin: '1.5rem 0',
+      fontFamily: 'var(--vp-font-family-base)'
+    }
+  },
+
+  // 标题样式
+  header: {
+    title: {
+      fontWeight: '700',
+      fontSize: '1.2rem',
+      marginBottom: '0.3rem',
+      background: 'linear-gradient(120deg, var(--vp-c-brand), #9c27b0)',
+      WebkitBackgroundClip: 'text',
+      WebkitTextFillColor: 'transparent'
+    },
+    subtitle: {
+      color: 'var(--vp-c-text-2)',
+      fontSize: '0.9rem'
+    }
+  },
+
+  // 按钮样式
+  button: {
+    base: 'auth-demo-btn',
+    primary: 'auth-demo-btn-primary',
+    variants: {
+      primary: {
+        background: 'var(--vp-c-brand)',
+        color: 'white'
+      },
+      success: {
+        background: '#22c55e',
+        color: 'white'
+      },
+      danger: {
+        background: '#ef4444',
+        color: 'white'
+      },
+      secondary: {
+        background: '#64748b',
+        color: 'white'
+      }
+    }
+  },
+
+  // 卡片样式
+  card: {
+    base: 'auth-demo-card',
+    background: 'var(--vp-c-bg)',
+    border: '1px solid var(--vp-c-divider)',
+    borderRadius: '10px',
+    padding: '1.25rem'
+  },
+
+  // 代码块样式
+  codeBlock: {
+    background: '#1e293b',
+    color: '#e2e8f0',
+    fontFamily: "'Courier New', monospace",
+    fontSize: '0.8rem',
+    lineHeight: '1.6',
+    padding: '0.75rem',
+    borderRadius: '6px'
+  }
+}
+
+// 动画配置
+export const animations = {
+  fadeIn: {
+    name: 'fadeIn',
+    css: `
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+    `
+  },
+  slideIn: {
+    name: 'slideIn',
+    css: `
+      @keyframes slideIn {
+        from {
+          opacity: 0;
+          transform: translateY(10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    `
+  },
+  pulse: {
+    name: 'pulse',
+    css: `
+      @keyframes pulse {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale(1.05); }
+      }
+    `
+  },
+  bounce: {
+    name: 'bounce',
+    css: `
+      @keyframes bounce {
+        0%, 100% { transform: translateX(-50%) translateY(0); }
+        50% { transform: translateX(-50%) translateY(-5px); }
+      }
+    `
+  },
+  spin: {
+    name: 'spin',
+    css: `
+      @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+    `
+  }
+}
+
+// 颜色配置
+export const colors = {
+  success: '#22c55e',
+  warning: '#f59e0b',
+  danger: '#ef4444',
+  info: '#3b82f6',
+  purple: '#8b5cf6'
+}
+
+// 响应式断点
+export const breakpoints = {
+  mobile: '768px'
+}