AI导哈

美容产品网站

基于React.js构建的美容产品网站，支持响应式设计和主题切换。

  • by tizi-tironi
  • CSS
  • 本地部署
  • 更新于
在 GitHub 查看 tizianatironi16/beauty-mcp

使用说明

美容MCP

基于Figma设计构建的React.js美容产品网站。

入门指南

安装

安装依赖项：

npm install

发展

启动开发服务器：

npm run dev

该应用程序将在 http://localhost:5173

构建

生产建设：

npm run build

预览

预览生产版本：

npm run preview

项目结构

Beauty-MCP/
├── src/
│   ├── components/
│   │   ├── Button.jsx
│   │   ├── Button.css
│   │   ├── Badge.jsx
│   │   └── Badge.css
│   ├── theme/
│   │   ├── index.js
│   │   └── tokens.css
│   ├── App.jsx
│   ├── App.css
│   └── main.jsx
├── env.example
├── index.html
├── package.json
├── vite.config.js
└── README.md

特性

  • 响应式导航栏
  • 英雄部分，呼吁行动
  • “为什么选择我们？”部分有功能卡
  • 展示畅销商品的产品转盘
  • 带有链接和社交媒体图标的页脚
  • 支持亮/暗主题的集中式设计代币

技术

  • React.js
  • 层叠样式表
  • 维特

设计代币和主题

  • 全球代币在 src/theme/tokens.css。它们暴露了排版、间距、运动、立面和颜色图元，以及亮/暗主题别名。导入此文件（在中完成 src/main.jsx)使代币在任何地方都可用。
  • 运行时助手 src/theme/index.js (initializeTheme, toggleTheme, applyTheme)设置 data-theme 属性on <html> 并坚持选择 localStorage.致电 toggleTheme() 从任何组件切换 light 和 dark.
  • 样式文件(App.css, components/Button.css, components/Badge.css)已被重构以通过以下方式使用共享令牌 var(--token-name)。当您需要新的间距、半径或颜色值时，请将其添加到 tokens.css 而不是硬编码。
  • 要在应用程序启动时覆盖默认主题，请传递一个值('light' 或 'dark')to initializeTheme() 在 src/main.jsx，或设置 data-theme 在React渲染之前手动添加属性。

相关 MCP