novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 重构核心 UI 组件库，新增 shadcn/ui 组件

Browse Source 
- 重构 Button、Card、Badge、Input、Textarea 等基础组件
- 新增 Accordion、Alert、Dialog、Dropdown、Form 等 shadcn/ui 组件
- 新增 AnimatedCounter、StatsShowcase、MetricCard 等数据展示组件
- 新增 ScrollReveal 滚动动画组件
- 重构 Toast 通知系统与 Tooltip 提示组件
- 更新设计令牌系统，对齐新品牌视觉
This commit is contained in:
张翔
2026-07-07 06:52:38 +08:00
parent 9053f69123
commit e78df62cd1
62 changed files with 4024 additions and 822 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/brand-visuals.tsx
+12 -12
View File
@@ -11,13 +11,13 @@ export function GeometricDecoration({ variant = 'circles' }: { variant?: 'circle
return (
<div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
<svg className="absolute top-[10%] right-[5%] w-64 h-64 opacity-[0.04]" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="80" fill="none" stroke="currentColor" className="text-[var(--color-brand-primary)]" strokeWidth="0.5" />
<circle cx="100" cy="100" r="60" fill="none" stroke="currentColor" className="text-[var(--color-brand-primary)]" strokeWidth="0.5" />
<circle cx="100" cy="100" r="40" fill="none" stroke="currentColor" className="text-[var(--color-brand-primary)]" strokeWidth="0.5" />
<circle cx="100" cy="100" r="80" fill="none" stroke="currentColor" className="text-[var(--color-brand)]" strokeWidth="0.5" />
<circle cx="100" cy="100" r="60" fill="none" stroke="currentColor" className="text-[var(--color-brand)]" strokeWidth="0.5" />
<circle cx="100" cy="100" r="40" fill="none" stroke="currentColor" className="text-[var(--color-brand)]" strokeWidth="0.5" />
{!shouldReduceMotion && (
<motion.circle
cx="100" cy="100" r="20"
fill="rgba(var(--color-brand-primary-rgb, 196, 30, 58), 0.1)"
fill="rgba(var(--color-brand-rgb, 196, 30, 58), 0.1)"
animate={{ r: [20, 35, 20], opacity: [0.1, 0.05, 0.1] }}
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
/>
@@ -35,9 +35,9 @@ export function GeometricDecoration({ variant = 'circles' }: { variant?: 'circle
return (
<div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
<svg className="absolute top-0 right-0 w-full h-full opacity-[0.02]" viewBox="0 0 1000 1000" preserveAspectRatio="none">
<line x1="800" y1="0" x2="1000" y2="400" stroke="currentColor" className="text-[var(--color-brand-primary)]" strokeWidth="1" />
<line x1="850" y1="0" x2="1000" y2="300" stroke="currentColor" className="text-[var(--color-brand-primary)]" strokeWidth="0.5" />
<line x1="900" y1="0" x2="1000" y2="200" stroke="currentColor" className="text-[var(--color-brand-primary)]" strokeWidth="0.5" />
<line x1="800" y1="0" x2="1000" y2="400" stroke="currentColor" className="text-[var(--color-brand)]" strokeWidth="1" />
<line x1="850" y1="0" x2="1000" y2="300" stroke="currentColor" className="text-[var(--color-brand)]" strokeWidth="0.5" />
<line x1="900" y1="0" x2="1000" y2="200" stroke="currentColor" className="text-[var(--color-brand)]" strokeWidth="0.5" />
<line x1="0" y1="600" x2="300" y2="1000" stroke="currentColor" className="text-[var(--color-text-subtle)]" strokeWidth="0.5" />
<line x1="0" y1="700" x2="200" y2="1000" stroke="currentColor" className="text-[var(--color-text-subtle)]" strokeWidth="0.5" />
</svg>
@@ -52,7 +52,7 @@ export function GeometricDecoration({ variant = 'circles' }: { variant?: 'circle
export function DataBar({ value, max = 100, label, color = 'brand' }: { value: number; max?: number; label: string; color?: 'brand' | 'blue' | 'purple' | 'cyan' }) {
const percentage = Math.min((value / max) * 100, 100);
const colorMap = {
brand: 'var(--color-brand-primary)',
brand: 'var(--color-brand)',
blue: 'var(--color-accent-blue)',
purple: 'var(--color-accent-purple)',
cyan: 'var(--color-accent-cyan)',
@@ -83,7 +83,7 @@ export function GradientDivider() {
return (
<div className="flex items-center gap-4 py-2">
<div className="h-px flex-1 bg-gradient-to-r from-transparent via-[var(--color-border-primary)] to-transparent" />
<div className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
<div className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand)]" />
<div className="h-px flex-1 bg-gradient-to-r from-transparent via-[var(--color-border-primary)] to-transparent" />
</div>
);
@@ -99,13 +99,13 @@ export function BrandStamp({ children }: { children: React.ReactNode }) {
whileInView={{ scale: 1, opacity: 1, rotate: -5 }}
viewport={{ once: true }}
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
className="inline-block px-3 py-1.5 border-2 border-[var(--color-brand-primary)] rounded-sm"
className="inline-block px-3 py-1.5 border-2 border-[var(--color-brand)] rounded-sm"
style={{
transform: 'rotate(-5deg)',
background: 'repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(var(--color-brand-primary-rgb), 0.03) 2px, rgba(var(--color-brand-primary-rgb), 0.03) 4px)',
background: 'repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(var(--color-brand-rgb), 0.03) 2px, rgba(var(--color-brand-rgb), 0.03) 4px)',
}}
>
<span className="text-xs font-bold tracking-widest text-[var(--color-brand-primary)] font-calligraphy">
<span className="text-xs font-bold tracking-widest text-[var(--color-brand)] font-calligraphy">
{children}
</span>
</motion.div>