Initial commit of 001code-html Scratch frontend project.
Includes scratch-gui, scratch-vm, scratch-blocks, scratch-render, scratch-l10n, and deployment config. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
205
简单使用示例.html
Normal file
205
简单使用示例.html
Normal file
@@ -0,0 +1,205 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user