mr-component
Version:
A library for Mr components
442 lines (388 loc) • 14.7 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<title>📱 MrTitle 手机标题组件测试</title>
<!-- 加载React 17 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 加载lowcode构建文件 -->
<script src="../build/lowcode/view.js"></script>
<link rel="stylesheet" href="../build/lowcode/view.css" />
<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
background: #f5f5f5;
min-height: 100vh;
}
.demo-container {
margin: 0;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.demo-content {
padding: 80px 20px 20px;
min-height: calc(100vh - 100px);
}
.update-notice {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 12px;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.update-notice h3 {
margin: 0 0 15px 0;
font-size: 18px;
display: flex;
align-items: center;
gap: 8px;
}
.update-notice ul {
margin: 0;
padding-left: 20px;
}
.update-notice li {
margin-bottom: 8px;
line-height: 1.5;
}
.demo-section {
margin-bottom: 40px;
}
.demo-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
color: #333;
}
.demo-description {
font-size: 14px;
color: #666;
margin-bottom: 20px;
line-height: 1.5;
}
.feature-list {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
.feature-list h4 {
margin: 0 0 10px 0;
color: #333;
font-size: 16px;
}
.feature-list ul {
margin: 0;
padding-left: 20px;
}
.feature-list li {
margin-bottom: 5px;
color: #666;
font-size: 14px;
}
.test-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.test-btn {
padding: 8px 16px;
border: 1px solid #007aff;
background: white;
color: #007aff;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.test-btn:hover {
background: #007aff;
color: white;
}
.test-btn:active {
transform: scale(0.95);
}
.console-output {
background: #1e1e1e;
color: #fff;
padding: 15px;
border-radius: 8px;
font-family: 'SF Mono', Monaco, monospace;
font-size: 12px;
margin-top: 20px;
max-height: 200px;
overflow-y: auto;
}
/* 手机设备特定样式 */
@media screen and (max-width: 414px) {
.demo-content {
padding: 70px 15px 15px;
}
}
/* 横屏适配 */
@media screen and (orientation: landscape) and (max-height: 500px) {
.demo-content {
padding: 50px 15px 15px;
}
}
/* 安全区域可视化（调试用） */
.safe-area-debug {
position: fixed;
top: 0;
left: 0;
right: 0;
height: env(safe-area-inset-top);
background: rgba(255, 0, 0, 0.2);
z-index: 999;
pointer-events: none;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState, useEffect } = React;
function TestApp() {
const [logs, setLogs] = useState([]);
const [currentTitle, setCurrentTitle] = useState('MrTitle 测试页面');
const [showSafeAreaDebug, setShowSafeAreaDebug] = useState(false);
const [showBorder, setShowBorder] = useState(true);
const addLog = (message) => {
const timestamp = new Date().toLocaleTimeString();
console.log(message);
setLogs((prev) => [...prev.slice(-4), `[${timestamp}] ${message}`]);
};
useEffect(() => {
// 检查组件是否加载成功
if (window.VantComponents && window.VantComponents.MrTitle) {
addLog('✅ MrTitle组件加载成功');
} else {
addLog('❌ MrTitle组件加载失败');
}
}, []);
// 全局返回事件监听
useEffect(() => {
const handleGlobalBack = (event) => {
addLog(`🌐 全局返回事件触发: ${event.type}, 详情: ${JSON.stringify(event.detail)}`);
};
window.addEventListener('app:back', handleGlobalBack);
return () => {
window.removeEventListener('app:back', handleGlobalBack);
};
}, []);
const handleBack = () => {
addLog('🔙 返回按钮被点击');
// 这里可以添加实际的返回逻辑
};
const changeTitle = (newTitle) => {
setCurrentTitle(newTitle);
addLog(`📝 标题已更改为: ${newTitle}`);
};
const testLongTitle = () => {
changeTitle('这是一个超级超级超级超级超级长的标题，用来测试文本截断功能');
};
const testShortTitle = () => {
changeTitle('短标题');
};
const testDefaultTitle = () => {
changeTitle('MrTitle 测试页面');
};
const toggleSafeAreaDebug = () => {
setShowSafeAreaDebug(!showSafeAreaDebug);
addLog(`🔍 安全区域调试: ${!showSafeAreaDebug ? '开启' : '关闭'}`);
};
const toggleShowBorder = () => {
setShowBorder(!showBorder);
addLog(`📏 底部边框: ${!showBorder ? '显示' : '隐藏'}`);
};
if (!window.VantComponents || !window.VantComponents.MrTitle) {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>❌ 组件加载失败</h2>
<p>无法找到MrTitle组件，请检查构建是否成功</p>
</div>
);
}
const MrTitle = window.VantComponents.MrTitle;
return (
<>
{/* 安全区域可视化调试 */}
{showSafeAreaDebug && <div className="safe-area-debug" />}
{/* MrTitle 组件 */}
<MrTitle
title={currentTitle}
showBack={true}
onBack={handleBack}
safeArea={true}
fixed={true}
showBorder={showBorder}
backgroundColor="#ffffff"
titleColor="#000000"
height={44}
maxLength={15}
/>
{/* 页面内容 */}
<div className="demo-container">
<div className="demo-content">
{/* 更新通知 */}
<div className="update-notice">
<h3>✨ 最新更新</h3>
<ul>
<li>
🎨 <strong>添加底部间距</strong>
：组件现在有8px的底部内边距，让组件看起来更美观，与顶部间距保持一致
</li>
<li>
🖼️ <strong>使用现有图片</strong>
：返回按钮现在使用您放在image文件夹中的arrowLeft.svg文件，替代了内联SVG
</li>
<li>
📱 <strong>安全区域适配增强</strong>：现在同时支持顶部和底部安全区域自动适配
</li>
<li>
🎯 <strong>颜色滤镜支持</strong>：返回按钮图标会根据titleColor属性自动调整颜色
</li>
<li>
🔘 <strong>去掉返回按钮背景</strong>
：移除了返回按钮的蓝色边框和背景色，更加简洁
</li>
<li>
⚙️ <strong>可配置底部边框</strong>
：新增showBorder属性，可以控制是否显示底部分割线
</li>
<li>
🎯 <strong>彻底移除按钮背景</strong>
：完全去掉返回按钮的hover、focus、active状态背景和阴影效果
</li>
<li>
🔧 <strong>修复返回按钮逻辑</strong>
：解决点击返回按钮导致页面刷新的问题，正确阻止默认行为和事件冒泡
</li>
<li>
🌐 <strong>全局返回事件支持</strong>
：新增enableGlobalBack属性，支持发送全局返回事件，便于跨框架应用集成
</li>
</ul>
</div>
<div className="demo-section">
<h2 className="demo-title">📱 MrTitle 手机标题组件</h2>
<p className="demo-description">
专为移动端设计的标题栏组件，支持安全区域适配、返回功能、文本截断等特性。
</p>
<div className="feature-list">
<h4>🎯 核心特性</h4>
<ul>
<li>✅ 自动适配手机顶部安全区域 (safe-area-inset-top)</li>
<li>✅ 标题居中显示，过长自动显示省略号</li>
<li>✅ 左侧返回按钮，支持自定义图标和事件</li>
<li>✅ 固定在页面顶部，不随页面滚动</li>
<li>✅ 响应式设计，适配不同屏幕尺寸</li>
<li>✅ 支持横屏模式自动调整</li>
<li>✅ 暗黑模式支持</li>
<li>✅ 无障碍功能支持</li>
</ul>
</div>
</div>
<div className="demo-section">
<h3 className="demo-title">🧪 功能测试</h3>
<p className="demo-description">点击下面的按钮测试不同的标题和功能：</p>
<div className="test-buttons">
<button className="test-btn" onClick={testShortTitle}>
短标题
</button>
<button className="test-btn" onClick={testDefaultTitle}>
默认标题
</button>
<button className="test-btn" onClick={testLongTitle}>
超长标题测试
</button>
<button className="test-btn" onClick={toggleSafeAreaDebug}>
{showSafeAreaDebug ? '关闭' : '开启'}安全区域调试
</button>
<button className="test-btn" onClick={toggleShowBorder}>
{showBorder ? '隐藏' : '显示'}底部边框
</button>
</div>
<div className="console-output">
<div style={{ marginBottom: '5px', color: '#4ade80' }}>📝 操作日志:</div>
{logs.map((log, index) => (
<div key={index}>{log}</div>
))}
</div>
</div>
<div className="demo-section">
<h3 className="demo-title">📱 设备适配测试</h3>
<p className="demo-description">在不同设备上测试组件的表现：</p>
<div className="feature-list">
<h4>🔍 测试建议</h4>
<ul>
<li>在iPhone X/11/12系列上测试安全区域适配</li>
<li>横屏模式下检查标题栏高度调整</li>
<li>不同Android设备的状态栏适配</li>
<li>在iPad上测试响应式布局</li>
<li>暗黑模式下的显示效果</li>
</ul>
</div>
</div>
<div className="demo-section">
<h3 className="demo-title">⚙️ Props 配置说明</h3>
<div className="feature-list">
<h4>📋 主要属性</h4>
<ul>
<li>
<strong>title</strong>: 标题文本
</li>
<li>
<strong>showBack</strong>: 是否显示返回按钮
</li>
<li>
<strong>safeArea</strong>: 是否适配安全区域
</li>
<li>
<strong>fixed</strong>: 是否固定在顶部
</li>
<li>
<strong>maxLength</strong>: 标题最大字符数
</li>
<li>
<strong>backgroundColor</strong>: 背景颜色
</li>
<li>
<strong>titleColor</strong>: 文字颜色
</li>
<li>
<strong>onBack</strong>: 返回按钮点击事件
</li>
</ul>
</div>
</div>
<div
style={{
height: '100px',
textAlign: 'center',
paddingTop: '40px',
color: '#999',
}}
>
- 页面底部 -
</div>
</div>
</div>
</>
);
}
ReactDOM.render(<TestApp />, document.getElementById('root'));
</script>
</body>
</html>