刘宇飞
6e0a1fbcbb
Includes scratch-gui, scratch-vm, scratch-blocks, scratch-render, scratch-l10n, and deployment config. Co-authored-by: Cursor <cursoragent@cursor.com>
205 lines
6.4 KiB
HTML
205 lines
6.4 KiB
HTML
<!DOCTYPE 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 {
|
||
margin: 0;
|
||
padding: 20px;
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
|
||
min-height: 100vh;
|
||
color: #333;
|
||
}
|
||
|
||
.demo-container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 30px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
h1 {
|
||
color: #2d3436;
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.feature-list {
|
||
background: #f8f9fa;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.feature-list h3 {
|
||
color: #6c5ce7;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.feature-list ul {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.feature-list li {
|
||
margin-bottom: 8px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.code-section {
|
||
background: #2d3436;
|
||
color: #ddd;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
font-family: 'Courier New', monospace;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.code-section h4 {
|
||
color: #74b9ff;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.highlight {
|
||
background: linear-gradient(135deg, #00cec9 0%, #55a3ff 100%);
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
margin: 20px 0;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.demo-content {
|
||
background: #f1f2f6;
|
||
padding: 30px;
|
||
border-radius: 10px;
|
||
margin: 20px 0;
|
||
text-align: center;
|
||
min-height: 200px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.demo-content h3 {
|
||
color: #2d3436;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.demo-content p {
|
||
color: #636e72;
|
||
margin: 5px 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="demo-container">
|
||
<h1>🚀 好友开关组件 - 右侧抽屉演示</h1>
|
||
|
||
<div class="feature-list">
|
||
<h3>✨ 新功能特性</h3>
|
||
<ul>
|
||
<li><strong>可拖动图标</strong>：好友图标可以在页面上自由拖动到任意位置</li>
|
||
<li><strong>右侧抽屉</strong>：点击图标从右侧滑出好友列表，现代化设计</li>
|
||
<li><strong>智能交互</strong>：拖动时不会误触发点击事件</li>
|
||
<li><strong>全屏体验</strong>：抽屉占满整个屏幕高度，提供更好的浏览体验</li>
|
||
<li><strong>流畅动画</strong>：使用贝塞尔曲线实现平滑的滑入滑出效果</li>
|
||
<li><strong>灵活添加</strong>：支持通过用户ID或用户名添加好友，一行布局更简洁</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="highlight">
|
||
💡 试试拖动右下角的"好友"按钮到其他位置，然后点击查看抽屉效果！
|
||
</div>
|
||
|
||
<div class="demo-content">
|
||
<h3>📱 操作说明</h3>
|
||
<p>1. 找到页面右下角的"好友"按钮</p>
|
||
<p>2. 拖动按钮到你喜欢的位置</p>
|
||
<p>3. 点击按钮打开右侧好友列表抽屉</p>
|
||
<p>4. 在抽屉中可以查看、搜索、添加和删除好友</p>
|
||
</div>
|
||
|
||
<div class="code-section">
|
||
<h4>🔧 快速集成代码</h4>
|
||
<pre>
|
||
<!-- 1. 引入必要的文件 -->
|
||
<script src="./scratch-gui/src/playground/rank-badge-generator.js"></script>
|
||
<script src="./scratch-gui/src/components/friend-toggle/FriendListModal.js"></script>
|
||
<script src="./scratch-gui/src/components/friend-toggle/FriendToggle.js"></script>
|
||
|
||
<script>
|
||
// 2. 配置API地址
|
||
window.CONFIG = {
|
||
DataServerBaseUrl: 'http://localhost:8601'
|
||
};
|
||
|
||
// 3. 设置用户认证令牌
|
||
localStorage.setItem('access_token', 'your-access-token');
|
||
|
||
// 4. 初始化好友开关组件
|
||
const friendToggle = new FriendToggle({
|
||
position: 'bottom-right', // 初始位置
|
||
size: 'medium', // 大小
|
||
theme: 'default' // 主题
|
||
});
|
||
</script>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="code-section">
|
||
<h4>⚙️ 高级配置选项</h4>
|
||
<pre>
|
||
// 可配置选项
|
||
const friendToggle = new FriendToggle({
|
||
position: 'bottom-right', // 位置: top-left, top-right, bottom-left, bottom-right
|
||
size: 'medium', // 大小: small, medium, large
|
||
theme: 'default', // 主题: default, dark, colorful
|
||
zIndex: 9999 // 层级
|
||
});
|
||
|
||
// 单例模式 - 多次调用返回同一实例
|
||
const sameFriendToggle = FriendToggle.getInstance();
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 引入组件文件 -->
|
||
<script src="./scratch-gui/src/playground/rank-badge-generator.js"></script>
|
||
<script src="./scratch-gui/src/components/friend-toggle/FriendListModal.js"></script>
|
||
<script src="./scratch-gui/src/components/friend-toggle/FriendToggle.js"></script>
|
||
|
||
<script>
|
||
// 配置API
|
||
window.CONFIG = {
|
||
DataServerBaseUrl: 'http://localhost:8601'
|
||
};
|
||
|
||
// 设置测试token
|
||
localStorage.setItem('access_token', 'test-token-123');
|
||
|
||
// 初始化好友开关组件
|
||
console.log('初始化好友开关组件...');
|
||
const friendToggle = new FriendToggle({
|
||
position: 'bottom-right',
|
||
size: 'medium',
|
||
theme: 'default'
|
||
});
|
||
|
||
console.log('好友开关组件已初始化');
|
||
|
||
// 监听好友开关点击事件
|
||
document.addEventListener('friendToggleClick', (e) => {
|
||
console.log('好友开关被点击了:', e.detail);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |