yunqueai/ai_dianshang
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web

Browse Source
This commit is contained in:
sjk
2025-11-28 15:18:10 +08:00
parent ad4a600af9
commit 5683f35942
188 changed files with 53680 additions and 1062 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
web/toast-demo.html Normal file
View File

@@ -0,0 +1,347 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toast 消息提醒组件演示</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/toast.css">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.demo-container {
background: white;
border-radius: 20px;
padding: 40px;
max-width: 800px;
width: 100%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
h1 {
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
color: #1a1a1a;
text-align: center;
}
.subtitle {
text-align: center;
color: #666;
margin-bottom: 40px;
font-size: 16px;
}
.demo-section {
margin-bottom: 30px;
}
.demo-section h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
color: #333;
}
.button-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
}
.demo-btn {
padding: 12px 24px;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
color: white;
}
.demo-btn:active {
transform: scale(0.95);
}
.btn-success {
background: linear-gradient(135deg, #34C759, #28a745);
}
.btn-error {
background: linear-gradient(135deg, #FF3B30, #dc3545);
}
.btn-warning {
background: linear-gradient(135deg, #FF9500, #f39c12);
}
.btn-info {
background: linear-gradient(135deg, #007AFF, #0056b3);
}
.btn-confirm {
background: linear-gradient(135deg, #667eea, #764ba2);
}
.demo-btn:hover {
opacity: 0.9;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.code-block {
background: #f5f5f7;
border-radius: 8px;
padding: 15px;
margin-top: 10px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 13px;
color: #333;
overflow-x: auto;
}
@media (max-width: 768px) {
.demo-container {
padding: 30px 20px;
}
h1 {
font-size: 24px;
}
.button-group {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="demo-container">
<h1>🎨 Toast 消息提醒组件</h1>
<p class="subtitle">iOS风格的优雅消息提示</p>
<div class="demo-section">
<h2>基础消息类型</h2>
<div class="button-group">
<button class="demo-btn btn-success" onclick="Toast.success('操作成功！')">
✓ 成功消息
</button>
<button class="demo-btn btn-error" onclick="Toast.error('操作失败，请重试')">
✕ 错误消息
</button>
<button class="demo-btn btn-warning" onclick="Toast.warning('请注意检查信息')">
! 警告消息
</button>
<button class="demo-btn btn-info" onclick="Toast.info('这是一条提示消息')">
i 提示消息
</button>
</div>
<div class="code-block">
Toast.success('操作成功！');
Toast.error('操作失败，请重试');
Toast.warning('请注意检查信息');
Toast.info('这是一条提示消息');
</div>
</div>
<div class="demo-section">
<h2>自定义显示时长</h2>
<div class="button-group">
<button class="demo-btn btn-info" onclick="Toast.info('1秒后消失', { duration: 1000 })">
1秒消失
</button>
<button class="demo-btn btn-info" onclick="Toast.info('5秒后消失', { duration: 5000 })">
5秒消失
</button>
</div>
<div class="code-block">
Toast.info('1秒后消失', { duration: 1000 });
Toast.info('5秒后消失', { duration: 5000 });
</div>
</div>
<div class="demo-section">
<h2>不同位置显示</h2>
<div class="button-group">
<button class="demo-btn btn-info" onclick="Toast.info('顶部居中', { position: 'top-center' })">
顶部居中
</button>
<button class="demo-btn btn-info" onclick="Toast.info('顶部右侧', { position: 'top-right' })">
顶部右侧
</button>
<button class="demo-btn btn-info" onclick="Toast.info('底部居中', { position: 'bottom-center' })">
底部居中
</button>
<button class="demo-btn btn-info" onclick="Toast.info('屏幕中心', { position: 'center' })">
屏幕中心
</button>
</div>
<div class="code-block">
Toast.info('顶部居中', { position: 'top-center' });
Toast.info('顶部右侧', { position: 'top-right' });
Toast.info('底部居中', { position: 'bottom-center' });
Toast.info('屏幕中心', { position: 'center' });
</div>
</div>
<div class="demo-section">
<h2>确认对话框</h2>
<div class="button-group">
<button class="demo-btn btn-confirm" onclick="showConfirmDialog()">
显示确认对话框
</button>
<button class="demo-btn btn-confirm" onclick="showCustomDialog()">
自定义对话框
</button>
</div>
<div class="code-block">
Toast.confirm({
title: '确认删除',
message: '删除后无法恢复，确定要删除吗？',
confirmText: '删除',
cancelText: '取消'
}).then(confirmed => {
if (confirmed) {
Toast.success('已删除');
}
});
</div>
</div>
<div class="demo-section">
<h2>输入对话框</h2>
<div class="button-group">
<button class="demo-btn btn-info" onclick="showInputDialog()">
输入用户名
</button>
<button class="demo-btn btn-info" onclick="showEmailDialog()">
输入邮箱
</button>
<button class="demo-btn btn-info" onclick="showPhoneDialog()">
输入手机号
</button>
</div>
<div class="code-block">
Toast.prompt({
title: '设置用户名',
placeholder: '请输入用户名',
defaultValue: '张三',
maxLength: 20
}).then(value => {
if (value !== null) {
Toast.success(`用户名已设置为：${value}`);
}
});
</div>
</div>
<div class="demo-section">
<h2>长文本消息</h2>
<div class="button-group">
<button class="demo-btn btn-info" onclick="Toast.info('这是一条很长很长的消息，用来测试当消息内容比较多的时候，Toast组件的显示效果如何。')">
显示长文本
</button>
</div>
</div>
</div>
<script src="assets/js/toast.js"></script>
<script>
function showConfirmDialog() {
Toast.confirm({
title: '确认删除',
message: '删除后无法恢复，确定要删除吗？',
confirmText: '删除',
cancelText: '取消'
}).then(confirmed => {
if (confirmed) {
Toast.success('已删除');
} else {
Toast.info('已取消');
}
});
}
function showCustomDialog() {
Toast.confirm({
title: '退出登录',
message: '确定要退出当前账号吗？',
confirmText: '确定',
cancelText: '取消',
confirmColor: '#FF3B30',
cancelColor: '#007AFF'
}).then(confirmed => {
if (confirmed) {
Toast.success('已退出登录', { duration: 1500 });
}
});
}
function showInputDialog() {
Toast.prompt({
title: '设置用户名',
placeholder: '请输入用户名',
defaultValue: '',
maxLength: 20
}).then(value => {
if (value !== null && value.trim() !== '') {
Toast.success(`用户名已设置为：${value}`);
} else if (value !== null) {
Toast.warning('用户名不能为空');
}
});
}
function showEmailDialog() {
Toast.prompt({
title: '设置邮箱',
placeholder: '请输入邮箱地址',
defaultValue: '',
inputType: 'email'
}).then(value => {
if (value !== null && value.trim() !== '') {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailRegex.test(value)) {
Toast.success(`邮箱已设置为：${value}`);
} else {
Toast.error('请输入有效的邮箱地址');
}
} else if (value !== null) {
Toast.warning('邮箱不能为空');
}
});
}
function showPhoneDialog() {
Toast.prompt({
title: '设置手机号',
placeholder: '请输入11位手机号',
defaultValue: '',
inputType: 'tel',
maxLength: 11
}).then(value => {
if (value !== null && value.trim() !== '') {
const phoneRegex = /^1[3-9]\d{9}$/;
if (phoneRegex.test(value)) {
Toast.success(`手机号已设置为：${value}`);
} else {
Toast.error('请输入有效的手机号');
}
} else if (value !== null) {
Toast.warning('手机号不能为空');
}
});
}
</script>
</body>
</html>