mr-component
Version:
A library for Mr components
554 lines (499 loc) • 17.1 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>业务组件库 - 完整演示</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
padding: 20px;
background: #f5f6fa;
margin: 0;
line-height: 1.6;
}
.demo-container {
max-width: 1200px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.demo-header {
text-align: center;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 2px solid #e8e8e8;
}
.demo-title {
font-size: 28px;
font-weight: 700;
color: #333;
margin-bottom: 10px;
}
.demo-subtitle {
font-size: 16px;
color: #666;
margin-bottom: 0;
}
.demo-section {
margin-bottom: 40px;
}
.section-title {
font-size: 20px;
font-weight: 600;
color: #333;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #e8e8e8;
display: flex;
align-items: center;
gap: 10px;
}
.section-icon {
width: 24px;
height: 24px;
background: #1989fa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
font-weight: 600;
}
.component-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.component-item {
background: #fafafa;
border: 1px solid #e8e8e8;
border-radius: 12px;
padding: 20px;
transition: all 0.3s ease;
}
.component-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.component-label {
font-size: 14px;
font-weight: 500;
color: #666;
margin-bottom: 10px;
}
.component-demo {
margin-bottom: 15px;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stats-item {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 12px;
text-align: center;
}
.stats-number {
font-size: 24px;
font-weight: 700;
margin-bottom: 5px;
}
.stats-label {
font-size: 14px;
opacity: 0.9;
}
.feature-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin-top: 20px;
}
.feature-item {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
border-left: 4px solid #1989fa;
display: flex;
align-items: center;
gap: 10px;
}
.feature-icon {
width: 20px;
height: 20px;
background: #1989fa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
}
.feature-text {
font-size: 14px;
color: #333;
font-weight: 500;
}
.description {
background: #f8f9fa;
padding: 20px;
border-radius: 12px;
margin-bottom: 30px;
border-left: 4px solid #1989fa;
}
.description h3 {
color: #333;
margin-bottom: 10px;
font-size: 16px;
}
.description p {
color: #666;
margin: 0;
line-height: 1.6;
}
@media (max-width: 768px) {
.demo-container {
padding: 20px;
}
.component-showcase {
grid-template-columns: 1fr;
}
.demo-grid {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<div class="demo-container">
<div class="demo-header">
<h1 class="demo-title">🎨 业务组件库演示</h1>
<p class="demo-subtitle">基于React-Vant构建的现代化业务组件库，简化开发流程</p>
</div>
<!-- 统计信息 -->
<div class="stats-grid">
<div class="stats-item">
<div class="stats-number">4</div>
<div class="stats-label">已完成组件</div>
</div>
<div class="stats-item">
<div class="stats-number">15+</div>
<div class="stats-label">预设样式</div>
</div>
<div class="stats-item">
<div class="stats-number">100%</div>
<div class="stats-label">TypeScript</div>
</div>
<div class="stats-item">
<div class="stats-number">简化版</div>
<div class="stats-label">设计理念</div>
</div>
</div>
<!-- 设计理念 -->
<div class="description">
<h3>🎯 设计理念</h3>
<p>
采用简化设计理念，直接通过属性设置样式，避免复杂的CSS覆盖。像使用原生react-vant一样简单，支持主题预设和完全自定义。
</p>
</div>
<!-- 核心特性 -->
<div class="feature-list">
<div class="feature-item">
<div class="feature-icon">✨</div>
<div class="feature-text">简化样式配置</div>
</div>
<div class="feature-item">
<div class="feature-icon">🎨</div>
<div class="feature-text">主题预设 + 自定义</div>
</div>
<div class="feature-item">
<div class="feature-icon">⚡</div>
<div class="feature-text">开箱即用</div>
</div>
<div class="feature-item">
<div class="feature-icon">🔧</div>
<div class="feature-text">TypeScript 支持</div>
</div>
</div>
<!-- MrButton 演示 -->
<div class="demo-section">
<h2 class="section-title">
<div class="section-icon">1</div>
MrButton - 业务按钮
</h2>
<div class="component-showcase">
<div class="component-item">
<div class="component-label">基础按钮</div>
<div class="component-demo" id="button-basic"></div>
</div>
<div class="component-item">
<div class="component-label">主题按钮</div>
<div class="component-demo" id="button-themes"></div>
</div>
<div class="component-item">
<div class="component-label">尺寸按钮</div>
<div class="component-demo" id="button-sizes"></div>
</div>
<div class="component-item">
<div class="component-label">自定义样式</div>
<div class="component-demo" id="button-custom"></div>
</div>
</div>
</div>
<!-- MrInput 演示 -->
<div class="demo-section">
<h2 class="section-title">
<div class="section-icon">2</div>
MrInput - 业务输入框
</h2>
<div class="component-showcase">
<div class="component-item">
<div class="component-label">基础输入框</div>
<div class="component-demo" id="input-basic"></div>
</div>
<div class="component-item">
<div class="component-label">主题输入框</div>
<div class="component-demo" id="input-themes"></div>
</div>
<div class="component-item">
<div class="component-label">不同尺寸</div>
<div class="component-demo" id="input-sizes"></div>
</div>
<div class="component-item">
<div class="component-label">自定义样式</div>
<div class="component-demo" id="input-custom"></div>
</div>
</div>
</div>
<!-- MrSelect 演示 -->
<div class="demo-section">
<h2 class="section-title">
<div class="section-icon">3</div>
MrSelect - 业务选择器
</h2>
<div class="component-showcase">
<div class="component-item">
<div class="component-label">基础选择器</div>
<div class="component-demo" id="select-basic"></div>
</div>
<div class="component-item">
<div class="component-label">主题选择器</div>
<div class="component-demo" id="select-themes"></div>
</div>
<div class="component-item">
<div class="component-label">不同尺寸</div>
<div class="component-demo" id="select-sizes"></div>
</div>
<div class="component-item">
<div class="component-label">自定义样式</div>
<div class="component-demo" id="select-custom"></div>
</div>
</div>
</div>
<!-- MrCard 演示 -->
<div class="demo-section">
<h2 class="section-title">
<div class="section-icon">4</div>
MrCard - 业务卡片
</h2>
<div class="demo-grid">
<div class="component-item">
<div class="component-label">基础卡片</div>
<div class="component-demo" id="card-basic"></div>
</div>
<div class="component-item">
<div class="component-label">产品卡片</div>
<div class="component-demo" id="card-product"></div>
</div>
<div class="component-item">
<div class="component-label">个人资料卡片</div>
<div class="component-demo" id="card-profile"></div>
</div>
<div class="component-item">
<div class="component-label">主题卡片</div>
<div class="component-demo" id="card-themes"></div>
</div>
</div>
</div>
</div>
<!-- 引入React和组件 -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-vant@3/lib/index.js"></script>
<script src="../lib/index.js"></script>
<script>
const { MrButton, MrInput, MrSelect, MrCard } =
window.YourMaterialDemo;
const { createElement: h } = React;
const { createRoot } = ReactDOM;
// MrButton 演示
createRoot(document.getElementById('button-basic')).render(
h(MrButton, {
children: '基础按钮',
theme: 'default',
}),
);
createRoot(document.getElementById('button-themes')).render(
h('div', { style: { display: 'flex', gap: '10px', flexWrap: 'wrap' } }, [
h(MrButton, { key: 1, children: '主色调', theme: 'primary', size: 'small' }),
h(MrButton, { key: 2, children: '成功', theme: 'success', size: 'small' }),
h(MrButton, { key: 3, children: '警告', theme: 'warning', size: 'small' }),
]),
);
createRoot(document.getElementById('button-sizes')).render(
h('div', { style: { display: 'flex', gap: '10px', alignItems: 'center' } }, [
h(MrButton, { key: 1, children: '小', size: 'small' }),
h(MrButton, { key: 2, children: '正常', size: 'normal' }),
h(MrButton, { key: 3, children: '大', size: 'large' }),
]),
);
createRoot(document.getElementById('button-custom')).render(
h(MrButton, {
children: '自定义样式',
backgroundColor: '#9C27B0',
textColor: '#FFFFFF',
borderColor: '#7B1FA2',
borderRadius: 20,
fontSize: 14,
fontWeight: 600,
}),
);
// MrInput 演示
createRoot(document.getElementById('input-basic')).render(
h(MrInput, {
placeholder: '请输入内容',
theme: 'default',
}),
);
createRoot(document.getElementById('input-themes')).render(
h('div', { style: { display: 'flex', flexDirection: 'column', gap: '10px' } }, [
h(MrInput, { key: 1, placeholder: '主色调', theme: 'primary' }),
h(MrInput, { key: 2, placeholder: '成功色', theme: 'success' }),
h(MrInput, { key: 3, placeholder: '警告色', theme: 'warning' }),
]),
);
createRoot(document.getElementById('input-sizes')).render(
h('div', { style: { display: 'flex', flexDirection: 'column', gap: '10px' } }, [
h(MrInput, { key: 1, placeholder: '小尺寸', height: 40, fontSize: 14 }),
h(MrInput, { key: 2, placeholder: '标准尺寸', height: 48, fontSize: 16 }),
h(MrInput, { key: 3, placeholder: '大尺寸', height: 56, fontSize: 18 }),
]),
);
createRoot(document.getElementById('input-custom')).render(
h(MrInput, {
placeholder: '自定义紫色样式',
borderColor: '#9C27B0',
backgroundColor: '#F3E5F5',
textColor: '#6A1B9A',
borderRadius: 12,
height: 48,
fontWeight: 500,
}),
);
// MrSelect 演示
const selectOptions = [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' },
];
createRoot(document.getElementById('select-basic')).render(
h(MrSelect, {
title: '基础选择器',
options: selectOptions,
theme: 'default',
}),
);
createRoot(document.getElementById('select-themes')).render(
h('div', { style: { display: 'flex', flexDirection: 'column', gap: '10px' } }, [
h(MrSelect, { key: 1, title: '主色调', options: selectOptions, theme: 'primary' }),
h(MrSelect, { key: 2, title: '成功色', options: selectOptions, theme: 'success' }),
h(MrSelect, { key: 3, title: '警告色', options: selectOptions, theme: 'warning' }),
]),
);
createRoot(document.getElementById('select-sizes')).render(
h('div', { style: { display: 'flex', flexDirection: 'column', gap: '10px' } }, [
h(MrSelect, { key: 1, title: '小尺寸', options: selectOptions, size: 'small' }),
h(MrSelect, { key: 2, title: '标准尺寸', options: selectOptions, size: 'normal' }),
h(MrSelect, { key: 3, title: '大尺寸', options: selectOptions, size: 'large' }),
]),
);
createRoot(document.getElementById('select-custom')).render(
h(MrSelect, {
title: '自定义样式',
options: selectOptions,
selectedColor: '#9C27B0',
selectedBackgroundColor: '#F3E5F5',
borderColor: '#9C27B0',
backgroundColor: '#F3E5F5',
}),
);
// MrCard 演示
createRoot(document.getElementById('card-basic')).render(
h(MrCard, {
title: '基础卡片',
content: '这是一个基础的业务卡片组件。',
theme: 'default',
size: 'normal',
}),
);
createRoot(document.getElementById('card-product')).render(
h(MrCard, {
title: 'iPhone 15',
subtitle: '最新款智能手机',
content: '全新设计，强大性能。',
image: 'https://img.yzcdn.cn/vant/ipad.jpeg',
badge: '新品',
theme: 'primary',
variant: 'product',
clickable: true,
}),
);
createRoot(document.getElementById('card-profile')).render(
h(MrCard, {
title: '张三',
subtitle: '前端开发工程师',
content: '专注React开发，5年经验。',
image: 'https://img.yzcdn.cn/vant/cat.jpeg',
imageRound: true,
theme: 'success',
variant: 'profile',
clickable: true,
}),
);
createRoot(document.getElementById('card-themes')).render(
h('div', { style: { display: 'flex', flexDirection: 'column', gap: '10px' } }, [
h(MrCard, {
key: 1,
title: '主色调卡片',
content: '使用主色调主题。',
theme: 'primary',
size: 'small',
}),
h(MrCard, {
key: 2,
title: '成功卡片',
content: '使用成功色主题。',
theme: 'success',
size: 'small',
}),
]),
);
</script>
</body>
</html>