Gluestack UI Web应用

REMS-胶水堆叠UI Web应用程序

基于Figma设计，使用Gluestack UI组件构建的React web应用程序。

⚠️ 当前状态

Figma API目前是速率限制的（429个错误），阻止自动获取设计数据。项目结构已建立并准备就绪。一旦恢复Figma API访问，将根据设计规范生成组件。

Figma文件: https://www.figma.com/design/sYNfZsEbjNZqPqU9pHBopB/REMS-glue-stack?node-id=3-2

🚀 快速开始

先决条件

• Node.js 18+
• npm或纱线

安装

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

📁 项目结构

/src
  /screens      - Screen components (one per Figma frame)
  /components   - Reusable UI components
  /theme        - Theme configuration and design tokens
  /utils        - Utility functions (responsive helpers, etc.)

🎨 技术

• 反应18 -UI库
• TypeScript -类型安全
• 维特 -构建工具和开发服务器
• 胶水堆叠UI -组件库（web版本）
• React路由器 -导航

📦 关键依赖关系

• @gluestack-ui/themed@latest -Gluestack UI web组件
• react@18 -React库
• react-dom@18 -React DOM
• vite -构建工具
• typescript -TypeScript编译器

🎯 下一步（一旦Figma Access可用）

1. 获取Figma设计数据

   • 使用Figma MCP从文件密钥中提取设计 sYNfZsEbjNZqPqU9pHBopB
   • 分析所有框架、组件和设计标记

2. 更新主题配置

   • 从Figma添加颜色到 src/theme/gluestack-ui.config.ts
   • 添加间距、排版和其他设计标记

3. 生成屏幕组件

   • 在中为每个Figma帧创建一个组件 src/screens/
   • 精确匹配间距、排版和颜色
   • 确保响应式设计

4. 创建可重用组件

   • 将常见模式提取到可重用组件中
   • 发生在 src/components/

5. 实施响应式设计

   • 使用来自的响应式实用程序 src/utils/responsive.ts
   • 在移动设备、平板电脑和台式机上进行测试

🛠️ 发展

部件结构

组件使用Gluestack UI的web兼容组件：

import { Box, VStack, HStack, Text, Heading, Button } from '@gluestack-ui/themed'

const MyComponent = () => {
  return (
    <Box width="100%" padding="$4">
      <VStack space="md">
        <Heading>Title</Heading>
        <Text>Content</Text>
        <Button onPress={() => {}}>
          <ButtonText>Click Me</ButtonText>
        </Button>
      </VStack>
    </Box>
  )
}

响应式设计

使用响应式实用程序：

import { getResponsiveValue, isMobile, isDesktop } from '../utils/responsive'

const spacing = isMobile() ? '$2' : '$4'

主题代币

通过Gluestack UI的令牌系统访问主题令牌：

<Box bg="$primary500" padding="$4" borderRadius="$lg">
  <Text color="$textLight0">Content</Text>
</Box>

📝 备注

• 这是一个 WEB 应用，不是React Native
• 所有组件均来自 @gluestack-ui/themed
• 未安装React Native依赖项
• 组件使用与web兼容的模式

🔗 资源

• Gluestack用户界面文档
• Vite文档
• React文档