mr-component
Version:
A library for Mr components
372 lines (342 loc) • 10.5 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>🎯 完美还原Figma设计 - 弹窗列表样式</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
margin: 0;
padding: 0;
background: #f5f6fa;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
display: flex;
gap: 40px;
max-width: 1200px;
width: 100%;
padding: 20px;
}
.demo-section {
background: white;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
flex: 1;
}
.demo-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
color: #333;
text-align: center;
padding-bottom: 12px;
border-bottom: 2px solid #e8e8e8;
}
.figma-title {
color: #1989fa;
}
.comparison-note {
background: #f8f9fa;
padding: 16px;
border-radius: 8px;
margin-bottom: 20px;
border-left: 4px solid #1989fa;
}
.comparison-note h3 {
margin: 0 0 8px 0;
color: #1989fa;
font-size: 14px;
}
.comparison-note p {
margin: 0;
color: #666;
font-size: 12px;
line-height: 1.4;
}
.config-example {
background: #f8f9fa;
padding: 16px;
border-radius: 8px;
margin-top: 20px;
border: 1px solid #e8e8e8;
}
.config-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
color: #333;
}
.config-code {
background: #2d3748;
color: #e2e8f0;
padding: 12px;
border-radius: 6px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 11px;
line-height: 1.4;
overflow-x: auto;
}
.improvements {
background: #e8f5e8;
padding: 12px;
border-radius: 6px;
margin-top: 16px;
border-left: 4px solid #07c160;
}
.improvements h4 {
margin: 0 0 8px 0;
color: #07c160;
font-size: 13px;
}
.improvements ul {
margin: 0;
padding-left: 16px;
font-size: 12px;
color: #333;
}
.improvements li {
margin-bottom: 4px;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
gap: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- 原始单选模式 -->
<div class="demo-section">
<div class="demo-title">❌ 原来的单选模式</div>
<div class="comparison-note">
<h3>问题分析</h3>
<p>
• 有单选按钮，不符合弹窗交互<br />• 每行都有边框，不是分隔线<br />•
缺少悬停效果和确认按钮
</p>
</div>
<div id="old-style"></div>
<div class="config-example">
<div class="config-title">旧版配置问题:</div>
<div class="config-code">
// 问题：设计成了单选列表而不是弹窗列表 // • 有选中状态和单选按钮 // •
每行独立边框和圆角 // • 缺少分隔线设计
</div>
</div>
</div>
<!-- 完美Figma弹窗设计 -->
<div class="demo-section">
<div class="demo-title figma-title">✅ 完美弹窗列表设计</div>
<div class="comparison-note">
<h3>还原效果</h3>
<p>• 无单选按钮，点击行直接选择<br />• 外层圆角，行间分隔线<br />• 悬停效果，确认按钮</p>
</div>
<div id="figma-perfect"></div>
<div class="improvements">
<h4>🎯 核心改进</h4>
<ul>
<li>移除单选按钮，改为点击行选择</li>
<li>只有外层容器有圆角和边框</li>
<li>行与行之间用细线分隔</li>
<li>添加悬停效果提升交互体验</li>
<li>支持确认按钮（弹窗模式常见）</li>
<li>图标+文字+描述的垂直布局</li>
</ul>
</div>
<div class="config-example">
<div class="config-title">正确配置:</div>
<div class="config-code">
{ "title": "Payment Source", "options": [ { "id": "wallet", "name": "Wallet", "balance":
"140,455.50", "currency": "KES", "extra": "Not Allow for Overdraft" }, { "id": "bank1",
"name": "MuRong Bank", "balance": "13,093.40", "currency": "KES", "fee": "6.00 KES",
"extra": "Immediate" } ], "showBalance": true, "showFee": true, "allowAddCard": true,
"showConfirmButton": true, "confirmButtonText": "Confirm" }
</div>
</div>
</div>
</div>
<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="../lib/index.js"></script>
<script>
const { BusinessPaymentSelector } = window.YourMaterialDemo;
const { createElement: h } = React;
const { createRoot } = ReactDOM;
// Figma设计的完整选项
const figmaOptions = [
{
id: 'wallet',
name: 'Wallet',
balance: '140,455.50',
currency: 'KES',
extra: 'Not Allow for Overdraft',
},
{
id: 'bank1',
name: 'MuRong Bank',
balance: '13,093.40',
currency: 'KES',
fee: '6.00 KES',
extra: 'Immediate',
},
{
id: 'bank2',
name: 'MuRong Bank',
balance: '2,500.00',
currency: 'KES',
fee: '6.00 KES',
extra: 'Immediate',
},
{
id: 'bank3',
name: 'MuRong Bank',
balance: '0.00',
currency: 'USD',
fee: '6.00 KES',
extra: 'Immediate',
disabled: true,
disabledReason: 'Insufficient balance',
},
];
// 简化选项用于对比
const simpleOptions = [
{
id: 'wallet',
name: 'Wallet',
balance: '140,455.50',
currency: 'KES',
},
{
id: 'bank',
name: 'MuRong Bank',
balance: '13,093.40',
currency: 'KES',
},
];
// 渲染旧版单选模式（模拟原来的样式）
createRoot(document.getElementById('old-style')).render(
h(
'div',
{
style: {
border: '1px solid #e8e8e8',
borderRadius: '8px',
padding: '16px',
backgroundColor: '#fff',
},
},
[
h(
'h3',
{
key: 'title',
style: {
margin: '0 0 12px 0',
fontSize: '16px',
},
},
'Payment Source',
),
...simpleOptions.map((option, index) =>
h(
'div',
{
key: option.id,
style: {
display: 'flex',
alignItems: 'center',
padding: '12px',
border: '1px solid #e8e8e8',
borderRadius: '6px',
marginBottom: index < simpleOptions.length - 1 ? '8px' : '0',
cursor: 'pointer',
},
},
[
h('div', {
key: 'radio',
style: {
width: '16px',
height: '16px',
borderRadius: '50%',
border: '2px solid #1989FA',
backgroundColor: index === 0 ? '#1989FA' : 'transparent',
marginRight: '12px',
},
}),
h(
'div',
{
key: 'icon',
style: {
width: '32px',
height: '32px',
borderRadius: '50%',
backgroundColor: '#1989FA',
color: 'white',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginRight: '12px',
fontSize: '14px',
fontWeight: 'bold',
},
},
option.name.charAt(0),
),
h(
'div',
{
key: 'content',
style: { flex: 1 },
},
[
h(
'div',
{
key: 'name',
style: { fontWeight: '500', marginBottom: '2px' },
},
`${option.name} (${option.currency} ${option.balance})`,
),
],
),
],
),
),
],
),
);
// 渲染完美Figma弹窗设计
createRoot(document.getElementById('figma-perfect')).render(
h(BusinessPaymentSelector, {
title: 'Payment Source',
options: figmaOptions,
showBalance: true,
showFee: true,
allowAddCard: true,
addCardText: 'Add a new card',
showConfirmButton: true,
confirmButtonText: 'Confirm',
onChange: (value, option) => {
console.log('选择支付方式:', value, option);
},
onAddCard: () => {
console.log('添加新卡片');
},
onConfirm: () => {
console.log('确认选择');
},
}),
);
</script>
</body>
</html>