feat:组件框架

2026-05-31 09:36:23 +08:00
parent b371a5341a
commit ba3b3ad5c8
483 changed files with 134708 additions and 1627 deletions
@@ -0,0 +1,82 @@
+import React from 'react'
+
+interface ComponentCardProps {
+  title: string
+  desc: string
+  href: string
+  children: React.ReactNode
+}
+
+const cardStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  border: '1px solid #e8e8e8',
+  borderRadius: 8,
+  textDecoration: 'none',
+  color: 'inherit',
+  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+  background: '#fff',
+  overflow: 'hidden',
+}
+
+const previewStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '28px 16px 20px',
+  background: '#fafafa',
+  minHeight: 72,
+  borderBottom: '1px solid #f0f0f0',
+  flexWrap: 'wrap',
+  gap: 8,
+}
+
+const infoStyle: React.CSSProperties = {
+  padding: '14px 16px',
+  flex: 1,
+}
+
+const titleStyle: React.CSSProperties = {
+  fontWeight: 500,
+  fontSize: 14,
+  color: 'rgba(0, 0, 0, 0.88)',
+  marginBottom: 2,
+}
+
+const descStyle: React.CSSProperties = {
+  fontSize: 12,
+  color: 'rgba(0, 0, 0, 0.45)',
+  lineHeight: 1.4,
+}
+
+export const ComponentCard: React.FC<ComponentCardProps> = ({ title, desc, href, children }) => {
+  const [hovered, setHovered] = React.useState(false)
+
+  const currentStyle: React.CSSProperties = {
+    ...cardStyle,
+    ...(hovered
+      ? {
+          borderColor: '#1890ff',
+          boxShadow: '0 4px 12px rgba(24, 144, 255, 0.15)',
+          transform: 'translateY(-2px)',
+        }
+      : {}),
+  }
+
+  return (
+    <a
+      href={href}
+      style={currentStyle}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <div style={previewStyle}>{children}</div>
+      <div style={infoStyle}>
+        <div style={titleStyle}>{title}</div>
+        <div style={descStyle}>{desc}</div>
+      </div>
+    </a>
+  )
+}
+
+export default ComponentCard