mr-component
Version:
A library for Mr components
170 lines (145 loc) • 5.01 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MrButton 颜色修复测试</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
margin: 0;
padding: 40px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.test-section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.test-section h3 {
margin: 0 0 15px 0;
color: #333;
font-size: 16px;
}
.button-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.description {
color: #666;
font-size: 14px;
margin-top: 10px;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<h1>🔧 MrButton 颜色显示修复测试</h1>
<p>测试按钮是否能正确显示颜色，不再需要鼠标悬停才显示</p>
<div class="test-section">
<h3>默认按钮（无variant属性）</h3>
<div class="button-row">
<div id="default-button"></div>
</div>
<div class="description">应该显示蓝色背景（payment-primary默认样式）</div>
</div>
<div class="test-section">
<h3>明确指定variant的按钮</h3>
<div class="button-row">
<div id="payment-primary-button"></div>
<div id="payment-secondary-button"></div>
<div id="success-action-button"></div>
</div>
<div class="description">应该正确显示对应variant的颜色</div>
</div>
<div class="test-section">
<h3>不同字体大小</h3>
<div class="button-row">
<div id="h4-button"></div>
<div id="h5-button"></div>
<div id="h6-button"></div>
<div id="h7-button"></div>
</div>
<div class="description">不同大小的按钮都应该正确显示颜色</div>
</div>
<div class="test-section">
<h3>状态测试</h3>
<div class="button-row">
<div id="normal-button"></div>
<div id="disabled-button"></div>
<div id="loading-button"></div>
</div>
<div class="description">正常、禁用、加载状态都应该有正确的视觉反馈</div>
</div>
</div>
<!-- React和相关依赖 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 引入构建后的组件库 -->
<script src="../lib/index.js"></script>
<!-- 样式文件 -->
<link rel="stylesheet" href="../lib/index.css" />
<script type="text/babel">
const { MrButton } = window.MrComponent;
// 默认按钮测试
ReactDOM.render(
<MrButton text="默认按钮" />,
document.getElementById('default-button'),
);
// 明确指定variant的按钮
ReactDOM.render(
<MrButton variant="payment-primary" text="支付主要按钮" />,
document.getElementById('payment-primary-button'),
);
ReactDOM.render(
<MrButton variant="payment-secondary" text="支付次要按钮" />,
document.getElementById('payment-secondary-button'),
);
ReactDOM.render(
<MrButton variant="success-action" text="成功操作按钮" />,
document.getElementById('success-action-button'),
);
// 不同字体大小
ReactDOM.render(
<MrButton fontSize="h4" text="H4 大按钮" />,
document.getElementById('h4-button'),
);
ReactDOM.render(
<MrButton fontSize="h5" text="H5 标准按钮" />,
document.getElementById('h5-button'),
);
ReactDOM.render(
<MrButton fontSize="h6" text="H6 小按钮" />,
document.getElementById('h6-button'),
);
ReactDOM.render(
<MrButton fontSize="h7" text="H7 迷你按钮" />,
document.getElementById('h7-button'),
);
// 状态测试
ReactDOM.render(<MrButton text="正常状态" />, document.getElementById('normal-button'));
ReactDOM.render(
<MrButton text="禁用状态" disabled />,
document.getElementById('disabled-button'),
);
ReactDOM.render(
<MrButton text="加载状态" loading />,
document.getElementById('loading-button'),
);
</script>
</body>
</html>