# 35 Design Styles Gallery

一个展示 35 种设计风格的交互式网页原型 Demo，每种风格都包含完整的 Dashboard UI 示例。

## 设计风格列表

该项目展示了以下 35 种独特的设计风格：

1. Neumorphism - 新拟态：柔和、浮雕化的界面

2. Glassmorphism - 玻璃拟态：模糊玻璃感、半透明层

3. Skeuomorphism - 拟物化：模拟真实质感

4. Flat Design - 扁平设计：无深度、强调色块

5. Material Design - 谷歌体系，平面＋层次＋阴影

6. Brutalism - 野蛮主义：原始、大胆、冲击强烈

7. Hyper-minimalism - 超极简主义：大量留白

8. Retro / Vaporwave - 复古蒸汽波：90年代怀旧感

9. Cyberpunk - 赛博朋克：黑底＋霓虹

10. Claymorphism - 黏土拟态：玩具感、黏土质感

11. Neo-Brutalism - 新野蛮主义：现代化的粗犷风格

12. Organic Minimalism - 有机极简主义：自然元素＋极简

13. Techno-Futurism - 科技未来主义：蓝紫渐变、空间感

14. Paper-Cut Illustration - 剪纸插画：手工感插画

15. Vintage Print - 复古印刷：琥珀色调、粗网点

16. Dark Elegance - 暗黑优雅：黑暗＋金属／铜色

17. Soft Pastel Playful - 柔和粉彩：柔和粉色系

18. Isometric UI - 等距视角：3D 风格界面

19. Monochrome Graphite - 单色石墨：灰阶＋强调色

20. Material Tactile - 触感材质：强化触觉的 Material Design

21. Eco-Natural Texture - 生态自然纹理：木纹、石材

22. Kawaii Pop - 卡哇伊流行：可爱风、明亮饱和色

23. Retro Pixel-Art - 复古像素：8-bit 色彩＋游戏感

24. High-Contrast Modern - 高对比现代：极高对比度

25. Bauhaus - 包豪斯：几何图形、功能主义

26. Art Deco - 装饰艺术：奢华几何、装饰性强

27. Pop Art - 波普艺术：大胆色彩、60年代感

28. Swiss Style - 瑞士风格：网格、极简、无衬线字体

29. Art Nouveau - 新艺术运动：曲线、自然形态

30. Psychedelic - 迷幻艺术：光影扭曲、大胆色彩

31. Steampunk - 蒸汽朋克：维多利亚+机械齿轮感

32. Kitsch - 媚俗艺术：夸张色彩＋复古元素

33. Japandi - 日式北欧：极简＋自然材质＋淡雅色调

34. Bohemian (Boho) - 波西米亚：自由、自然、纹理丰富

35. Goth / Tenebrism - 哥特暗影：黑暗＋强烈光影对比

## 技术栈

- React 19 - UI 框架

- TypeScript - 类型安全

- React Router v7 - 路由管理

- Vite - 构建工具

- CSS3 - 样式实现（包含动画和高级特效）

## 功能特性

- 📱 响应式设计 - 适配桌面、平板和移动设备

- 🎨 35 种独特风格 - 每种风格都有完整的视觉实现

- 🖥️ 完整 Dashboard - 包含导航栏、侧边栏、统计卡片、图表、表格、表单等

- 🔄 流畅动画 - 页面切换和交互动画

- 🎯 网格画廊主页 - 直观展示所有设计风格

## 快速开始

### 安装依赖

```bash

pnpm install

```

### 运行开发服务器

```bash

pnpm dev

```

访问 http://localhost:5173 查看应用。

### 构建生产版本

```bash

pnpm build

```

### 预览生产构建

```bash

pnpm preview

```

## 项目结构

```

src/

├── components/ # 可复用组件

│ ├── DashboardLayout.tsx # Dashboard 布局组件

│ └── DashboardLayout.css # Dashboard 基础样式

├── pages/ # 页面组件

│ ├── HomePage.tsx # 主页网格画廊

│ ├── HomePage.css # 主页样式

│ └── StylePage.tsx # 风格详情页

├── data/ # 数据配置

│ └── styles.ts # 35 种风格的配置数据

├── styles/ # 风格样式文件

│ ├── neumorphism.css

│ ├── glassmorphism.css

│ └── ... (共 35 个样式文件)

├── App.tsx # 应用根组件

├── main.tsx # 应用入口

└── index.css # 全局样式

```

## 使用说明

1. 浏览风格 - 在主页查看所有 35 种设计风格的预览卡片

2. 点击卡片 - 进入该风格的完整 Dashboard 示例页面

3. 体验交互 - 在 Dashboard 中查看各种 UI 元素和交互效果

4. 返回主页 - 点击"返回主页"按钮回到画廊视图

## 响应式断点

- 移动端 - < 768px：单列布局，侧边栏折叠

- 平板 - 768px - 1024px：多列网格，优化间距

- 桌面 - > 1024px：完整布局，最佳体验

## 浏览器支持

- Chrome (推荐)

- Firefox

- Safari

- Edge

## 许可证

MIT

## 作者

Created with ❤️ using Vite + React + TypeScript