@scqilin/phone-ui

原生 TypeScript 手机外观组件库，支持多机型演示与自定义外观。

⚠️ 本组件所有机型外观均为演示效果，并非真实手机尺寸，仅供开发测试参考！

🌐 在线演示

查看在线演示

✨ 特点

• 🚀 零依赖，纯 TypeScript + 动态样式注入
• 📱 内置 iPhone 16 全系列机型（16/Plus/Pro/Pro Max）
• 🎨 支持完全自定义外观（尺寸、颜色、按钮等）
• 💻 适用于任何前端项目
• 🎯 在线演示可直接体验

📦 安装

npm install @scqilin/phone-ui

🚀 快速开始

使用预设机型

import { createPhoneUI } from '@scqilin/phone-ui';

const container = document.getElementById('phone-demo');
createPhoneUI({
  container,
  phoneType: 'iphone16pro' // 自动使用预设尺寸和布局
});

自定义机型

import { createPhoneUI } from '@scqilin/phone-ui';

const container = document.getElementById('phone-demo');
createPhoneUI({
  container,
  width: 400,
  height: 800,
  frameColor: '#1a1a1a',
  screenColor: '#ffffff',
  showButtons: true
});

HTML 结构：

<div id="phone-demo"></div>

📖 API 文档

createPhoneUI(options)

| 参数 | 类型 | 必填 | 说明 | |------|------|------|------| | container | HTMLElement | ✅ | 渲染目标容器 | | phoneType | string | ❌ | 机型名称，支持 'iphone16' | 'iphone16plus' | 'iphone16pro' | 'iphone16promax' | | width | number | ❌ | 自定义宽度（传入 phoneType 时无效） | | height | number | ❌ | 自定义高度（传入 phoneType 时无效） | | frameColor | string | ❌ | 边框颜色，默认 '#1a1a1a' | | screenColor | string | ❌ | 屏幕颜色，默认 '#ffffff' | | showButtons | boolean | ❌ | 是否显示侧边按钮，默认 true | | borderRadius | number | ❌ | 圆角大小，默认 30 |

📱 支持的机型

| 机型 | phoneType 值 | 尺寸 | |------|--------------|------| | iPhone 16 | 'iphone16' | 402×874 | | iPhone 16 Plus | 'iphone16plus' | 440×950 | | iPhone 16 Pro | 'iphone16pro' | 402×874 | | iPhone 16 Pro Max | 'iphone16promax' | 440×950 |

🎨 使用说明

预设机型模式

• 传入 phoneType 参数时，自动使用对应机型的预设尺寸和布局
• 此时 width、height 等尺寸参数会被忽略
• 适合快速展示标准机型外观

自定义机型模式

• 不传 phoneType 或传入 'custom' 时进入自定义模式
• 可自由设置 width、height、borderRadius 等所有外观参数
• 适合特殊需求或非标准尺寸

💡 注意事项

• 样式自动注入，无需手动引入 CSS 文件
• 按钮为装饰性元素，不提供点击交互功能
• 建议为内容区域设置适当的内边距避免贴边

🧪 演示与测试

• 在线演示地址
• 本地查看：docs/index.html 文件
• 包含所有预设机型演示、自定义机型示例、壁纸背景效果

本地开发

# 构建项目
npm run build

# 本地预览演示页面
npm run dev

# 构建并预览
npm run preview

🗓️ 开发计划

• [ ] 添加更多 iPhone 机型（14/15 系列）
• [ ] 支持 Android 主流机型（Samsung Galaxy、小米等）
• [ ] 增加横屏模式支持
• [ ] 添加动态岛交互效果
• [ ] 支持自定义按钮样式和位置
• [ ] 提供更多预设主题和配色方案

📄 License

MIT