lxh/wechat-robot
lxh/wechat-robot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 逻辑优化
All checks were successful
BuildImage / build-image (push) Successful in 2m20s
Details

Browse Source
This commit is contained in:
李寻欢 2025-04-02 15:09:49 +08:00
parent 9ca7cc8f97
commit f3d8e73ab4
5 changed files with 377 additions and 566 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
internal/handler/home.go
View File

@ -18,7 +18,7 @@ func Home(c *fiber.Ctx) error {
}
// 未登录用户显示官网页面
return c.Render("home/landing", fiber.Map{
return c.Render("home/index", fiber.Map{
"Title": "微信机器人管理系统",
"NoLayout": true, // 使用特殊的官网布局，而非后台布局
})

478
internal/view/home/index.html
View File

@ -1,115 +1,381 @@
<div class="space-y-6">
<!-- 欢迎区块 -->
<div class="bg-gradient-to-r from-indigo-600 to-indigo-400 rounded-lg shadow-md p-6 text-white">
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold">欢迎使用微信机器人管理系统</h1>
<p class="mt-2 text-indigo-100">管理您的微信自动化实例，提升社交效率</p>
</div>
<div class="hidden md:block">
<i class="fas fa-robot text-6xl text-white/50"></i>
</div>
</div>
</div>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Title}} - 微信自动化管理平台</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background-color: #f8fafc;
}
<!-- 状态概览 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white rounded-lg shadow-sm p-5 transform transition-all duration-200 hover:shadow-md">
<div class="flex items-center">
<div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4">
<i class="fas fa-robot text-xl"></i>
</div>
<div>
<div class="text-gray-500">总机器人</div>
<div class="text-2xl font-semibold">{{.Stats.TotalRobots}}</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-5 transform transition-all duration-200 hover:shadow-md">
<div class="flex items-center">
<div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
<i class="fas fa-check-circle text-xl"></i>
</div>
<div>
<div class="text-gray-500">在线机器人</div>
<div class="text-2xl font-semibold">{{.Stats.OnlineRobots}}</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-5 transform transition-all duration-200 hover:shadow-md">
<div class="flex items-center">
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
<i class="fas fa-comments text-xl"></i>
</div>
<div>
<div class="text-gray-500">总消息</div>
<div class="text-2xl font-semibold">{{.Stats.TotalMessages}}</div>
</div>
</div>
</div>
</div>
/* 更精致的背景效果 */
.hero-section {
position: relative;
overflow: hidden;
background-color: white;
}
<!-- 快捷操作 -->
<div class="bg-white rounded-lg shadow-sm p-6">
<h2 class="text-lg font-medium text-gray-800 mb-4">快捷操作</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<a href="/admin/robots/new" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
<div class="p-3 rounded-full bg-indigo-100 mb-3">
<i class="fas fa-plus text-indigo-600"></i>
</div>
<span class="text-sm text-gray-700">新建机器人</span>
</a>
<a href="/admin/robots" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
<div class="p-3 rounded-full bg-blue-100 mb-3">
<i class="fas fa-list text-blue-600"></i>
</div>
<span class="text-sm text-gray-700">机器人列表</span>
</a>
<a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors" onclick="App.notify('此功能正在开发中', 'info'); return false;">
<div class="p-3 rounded-full bg-green-100 mb-3">
<i class="fas fa-chart-line text-green-600"></i>
</div>
<span class="text-sm text-gray-700">数据统计</span>
</a>
<a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors" onclick="App.notify('此功能正在开发中', 'info'); return false;">
<div class="p-3 rounded-full bg-purple-100 mb-3">
<i class="fas fa-cog text-purple-600"></i>
</div>
<span class="text-sm text-gray-700">系统设置</span>
</a>
</div>
</div>
.hero-dots {
background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.4;
}
<!-- 最近活动 -->
<div class="bg-white rounded-lg shadow-sm p-6">
<h2 class="text-lg font-medium text-gray-800 mb-4">最近活动</h2>
{{if .RecentActivities}}
<div class="space-y-4">
{{range .RecentActivities}}
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-500">
<i class="fas fa-{{.Icon}}"></i>
.feature-card {
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-8px);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
.glass-card {
background: white;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<!-- 导航栏 -->
<header class="fixed w-full z-50 bg-white shadow-sm border-b border-gray-100">
<nav class="container mx-auto px-4 py-4 flex items-center justify-between">
<div class="flex items-center">
<div class="text-2xl font-bold text-slate-700 flex items-center">
<i class="fas fa-robot mr-2"></i> WeChat<span class="text-gray-800">Bot</span>
</div>
</div>
<div class="flex items-center space-x-8">
<a href="#features" class="text-gray-700 hover:text-slate-900 transition-colors text-sm font-medium">功能特性</a>
<a href="#use-cases" class="text-gray-700 hover:text-slate-900 transition-colors text-sm font-medium">应用场景</a>
<a href="/login" class="bg-white text-slate-700 border border-slate-300 hover:border-slate-400 py-2.5 px-5 rounded-lg shadow-sm hover:shadow transition-all text-sm font-medium">
登录系统
</a>
</div>
</nav>
</header>
<!-- 英雄区域 - 更简洁精致的设计 -->
<section class="hero-section pt-32 pb-24">
<!-- 装饰背景 -->
<div class="absolute inset-0 hero-dots"></div>
<div class="absolute top-20 right-10 w-64 h-64 rounded-full bg-blue-50 blur-3xl opacity-50"></div>
<div class="absolute bottom-10 left-10 w-64 h-64 rounded-full bg-indigo-50 blur-3xl opacity-50"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="flex flex-col lg:flex-row items-center justify-between">
<div class="lg:w-1/2 mb-10 lg:mb-0 text-center lg:text-left animate-float">
<div class="inline-block px-4 py-1 bg-blue-50 text-blue-600 rounded-full text-sm font-medium mb-6">
新一代管理工具
</div>
<div class="ml-4 flex-1">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-900">{{.Title}}</p>
<p class="text-xs text-gray-500">{{.Time}}</p>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 text-gray-900 leading-tight">
智能微信<br />自动化管理系统
</h1>
<p class="text-xl text-gray-600 mb-10 max-w-lg mx-auto lg:mx-0 leading-relaxed">
提升您的社交效率和业务拓展能力，智能化管理多个微信账号的一站式平台
</p>
<div class="flex flex-col sm:flex-row justify-center lg:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
<a href="/login" class="bg-slate-800 hover:bg-slate-700 text-white py-4 px-8 rounded-lg shadow-md hover:shadow-lg transition-all text-center">
立即体验
</a>
<a href="#features" class="bg-white hover:bg-gray-50 text-slate-800 border border-gray-200 py-4 px-8 rounded-lg shadow-sm hover:shadow transition-all text-center">
了解更多
</a>
</div>
</div>
</div>
</div>
<!-- 优雅的分隔线 -->
<div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-b from-transparent to-gray-50"></div>
</section>
<!-- 特性区域 -->
<section id="features" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">强大功能特性</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">我们提供完整的微信自动化管理解决方案，满足多样化的业务需求</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
<div class="w-14 h-14 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600 mb-6">
<i class="fas fa-robot text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900">多机器人管理</h3>
<p class="text-gray-600 leading-relaxed">集中管理多个微信账号，实现业务统一调度和集中监控，提高运营效率</p>
</div>
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
<div class="w-14 h-14 bg-green-100 rounded-xl flex items-center justify-center text-green-600 mb-6">
<i class="fas fa-comments text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900">智能自动回复</h3>
<p class="text-gray-600 leading-relaxed">设置自动回复规则，让您的社交沟通更高效，提升客户响应速度</p>
</div>
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
<div class="w-14 h-14 bg-blue-100 rounded-xl flex items-center justify-center text-blue-600 mb-6">
<i class="fas fa-chart-line text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900">数据分析报表</h3>
<p class="text-gray-600 leading-relaxed">全面分析互动数据，挖掘有价值信息，辅助决策，提升社交效率</p>
</div>
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
<div class="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center text-purple-600 mb-6">
<i class="fas fa-users text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900">高效群组管理</h3>
<p class="text-gray-600 leading-relaxed">一键管理多个群组，自动化欢迎和群组通知，轻松维护群关系</p>
</div>
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
<div class="w-14 h-14 bg-amber-100 rounded-xl flex items-center justify-center text-amber-600 mb-6">
<i class="fas fa-clock text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900">定时任务系统</h3>
<p class="text-gray-600 leading-relaxed">设置消息定时发送，构建自动化工作流程，解放人力，提高效率</p>
</div>
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
<div class="w-14 h-14 bg-rose-100 rounded-xl flex items-center justify-center text-rose-600 mb-6">
<i class="fas fa-shield-alt text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900">安全容器隔离</h3>
<p class="text-gray-600 leading-relaxed">采用容器化技术，保障账号安全，数据加密存储，保护隐私</p>
</div>
</div>
</div>
</section>
<!-- 使用场景 -->
<section id="use-cases" class="py-20 bg-white relative">
<!-- 使用更柔和的背景 -->
<div class="absolute left-0 right-0 h-64 bg-gray-50/50 top-0"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">应用场景</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">适用于各行各业的微信自动化需求，提升管理效率</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white rounded-2xl shadow-lg p-8 transition-all hover:shadow-xl hover:-translate-y-1">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600 mr-4">
<i class="fas fa-store text-xl"></i>
</div>
<p class="text-sm text-gray-500">{{.Description}}</p>
<h3 class="text-2xl font-bold text-gray-900">客户服务</h3>
</div>
<p class="text-gray-600 mb-6 leading-relaxed">自动化客户咨询回复，提供产品信息和服务支持，大幅提升客户满意度与服务效率</p>
<ul class="space-y-3">
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
智能分类和处理客户需求
</li>
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
24小时无间断自动响应
</li>
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
定制化客户服务流程
</li>
</ul>
</div>
<div class="bg-white rounded-2xl shadow-lg p-8 transition-all hover:shadow-xl hover:-translate-y-1">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center text-green-600 mr-4">
<i class="fas fa-bullhorn text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">营销推广</h3>
</div>
<p class="text-gray-600 mb-6 leading-relaxed">精准投放营销内容，管理营销活动，统计用户反馈数据，提升转化率和ROI</p>
<ul class="space-y-3">
<!-- 修正这里的语法错误：将items中心改为items-center -->
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
智能分群精准营销
</li>
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
定时推送营销内容
</li>
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
营销效果数据分析
</li>
</ul>
</div>
<div class="bg-white rounded-2xl shadow-lg p-8 transition-all hover:shadow-xl hover:-translate-y-1">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center text-blue-600 mr-4">
<i class="fas fa-chalkboard-teacher text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">教育培训</h3>
</div>
<p class="text-gray-600 mb-6 leading-relaxed">管理学习群组，自动发送学习资料，组织在线答疑和互动，提升学习体验</p>
<ul class="space-y-3">
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
智能学习进度跟踪
</li>
<!-- 修正此处的错误：将"items中心"改为"items-center" -->
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
自动推送学习资料
</li>
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
智能答疑与互动
</li>
</ul>
</div>
<div class="bg-white rounded-2xl shadow-lg p-8 transition-all hover:shadow-xl hover:-translate-y-1">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center text-purple-600 mr-4">
<i class="fas fa-users-cog text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">团队协作</h3>
</div>
<p class="text-gray-600 mb-6 leading-relaxed">自动化团队通知，日程提醒，简化内部沟通流程，提高协作效率</p>
<ul class="space-y-3">
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
自动项目进度通知
</li>
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
智能会议安排提醒
</li>
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
团队任务自动分配
</li>
</ul>
</div>
{{end}}
</div>
{{else}}
<div class="text-center py-8 text-gray-500">
<i class="fas fa-inbox text-5xl mb-3 text-gray-300"></i>
<p>暂无活动记录</p>
</div>
</section>
<!-- 行动号召区域 - 更优雅 -->
<!-- 修复这里的错误：将"bg白"改为"bg-white" -->
<section class="py-20 relative bg-white overflow-hidden">
<!-- 装饰背景 -->
<div class="absolute inset-0 hero-dots opacity-30"></div>
<div class="absolute top-0 right-0 bottom-0 w-1/3 bg-gradient-to-l from-gray-50 to-transparent"></div>
<div class="absolute top-0 left-0 bottom-0 w-1/3 bg-gradient-to-r from-gray-50 to-transparent"></div>
<div class="container mx-auto px-4 relative z-10 text-center">
<div class="max-w-3xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">准备好提升微信管理效率了吗？</h2>
<p class="text-xl text-gray-600 mb-8">立即体验我们的平台，享受自动化带来的便利与效率</p>
<a href="/login" class="inline-block bg-slate-800 text-white py-4 px-8 rounded-lg shadow-md font-medium text-lg transition-all hover:shadow-lg hover:-translate-y-1">
立即开始使用
</a>
</div>
{{end}}
</div>
</div>
</div>
</section>
<!-- 回到顶部按钮 - 更新为深色调 -->
<button id="back-to-top" class="fixed bottom-6 right-6 bg-slate-800 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all z-50 hover:-translate-y-1 hover:shadow-xl">
<i class="fas fa-arrow-up"></i>
</button>
<script>
// 回到顶部按钮功能
document.addEventListener('DOMContentLoaded', function() {
const backToTopButton = document.getElementById('back-to-top');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
backToTopButton.classList.remove('opacity-0', 'invisible');
backToTopButton.classList.add('opacity-100', 'visible');
} else {
backToTopButton.classList.remove('opacity-100', 'visible');
backToTopButton.classList.add('opacity-0', 'invisible');
}
});
backToTopButton.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 平滑滚动到锚点
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// 导航栏滚动效果
const header = document.querySelector('header');
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
header.classList.add('shadow-md');
} else {
header.classList.remove('shadow-md');
}
});
});
</script>
</body>
</html>

451
internal/view/home/landing.html
View File

@ -1,451 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Title}} - 微信自动化管理平台</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background-color: #f8fafc;
}
/* 更精致的背景效果 */
.hero-section {
position: relative;
overflow: hidden;
background-color: white;
}
.hero-dots {
background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.4;
}
.feature-card {
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-8px);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
.glass-card {
background: white;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<!-- 导航栏 -->
<header class="fixed w-full z-50 bg-white shadow-sm border-b border-gray-100">
<nav class="container mx-auto px-4 py-4 flex items-center justify-between">
<div class="flex items-center">
<div class="text-2xl font-bold text-slate-700 flex items-center">
<i class="fas fa-robot mr-2"></i> WeChat<span class="text-gray-800">Bot</span>
</div>
</div>
<div class="flex items-center space-x-8">
<a href="#features" class="text-gray-700 hover:text-slate-900 transition-colors text-sm font-medium">功能特性</a>
<a href="#use-cases" class="text-gray-700 hover:text-slate-900 transition-colors text-sm font-medium">应用场景</a>
<a href="/login" class="bg-white text-slate-700 border border-slate-300 hover:border-slate-400 py-2.5 px-5 rounded-lg shadow-sm hover:shadow transition-all text-sm font-medium">
登录系统
</a>
</div>
</nav>
</header>
<!-- 英雄区域 - 更简洁精致的设计 -->
<section class="hero-section pt-32 pb-24">
<!-- 装饰背景 -->
<div class="absolute inset-0 hero-dots"></div>
<div class="absolute top-20 right-10 w-64 h-64 rounded-full bg-blue-50 blur-3xl opacity-50"></div>
<div class="absolute bottom-10 left-10 w-64 h-64 rounded-full bg-indigo-50 blur-3xl opacity-50"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="flex flex-col lg:flex-row items-center justify-between">
<div class="lg:w-1/2 mb-10 lg:mb-0 text-center lg:text-left">
<div class="inline-block px-4 py-1 bg-blue-50 text-blue-600 rounded-full text-sm font-medium mb-6">
新一代管理工具
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 text-gray-900 leading-tight">
智能微信<br />自动化管理系统
</h1>
<p class="text-xl text-gray-600 mb-10 max-w-lg mx-auto lg:mx-0 leading-relaxed">
提升您的社交效率和业务拓展能力，智能化管理多个微信账号的一站式平台
</p>
<div class="flex flex-col sm:flex-row justify-center lg:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
<a href="/login" class="bg-slate-800 hover:bg-slate-700 text-white py-4 px-8 rounded-lg shadow-md hover:shadow-lg transition-all text-center">
立即体验
</a>
<a href="#features" class="bg-white hover:bg-gray-50 text-slate-800 border border-gray-200 py-4 px-8 rounded-lg shadow-sm hover:shadow transition-all text-center">
了解更多
</a>
</div>
</div>
<div class="lg:w-1/2 flex justify-center lg:justify-end">
<div class="relative">
<div class="absolute -top-10 -right-10 w-64 h-64 rounded-full bg-indigo-50 opacity-60"></div>
<div class="animate-float">
<img src="/public/images/dashboard-preview.png" alt="仪表盘预览" class="rounded-xl shadow-xl max-w-full lg:max-w-md z-10 relative glass-card">
</div>
</div>
</div>
</div>
</div>
<!-- 优雅的分隔线 -->
<div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-b from-transparent to-gray-50"></div>
</section>
<!-- 特性区域 -->
<section id="features" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">强大功能特性</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">我们提供完整的微信自动化管理解决方案，满足多样化的业务需求</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
<div class="w-14 h-14 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600 mb-6">
<i class="fas fa-robot text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900">多机器人管理</h3>
<p class="text-gray-600 leading-relaxed">集中管理多个微信账号，实现业务统一调度和集中监控，提高运营效率</p>
</div>
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
<div class="w-14 h-14 bg-green-100 rounded-xl flex items-center justify-center text-green-600 mb-6">
<i class="fas fa-comments text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900">智能自动回复</h3>
<p class="text-gray-600 leading-relaxed">设置自动回复规则，让您的社交沟通更高效，提升客户响应速度</p>
</div>
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
<div class="w-14 h-14 bg-blue-100 rounded-xl flex items-center justify-center text-blue-600 mb-6">
<i class="fas fa-chart-line text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900">数据分析报表</h3>
<p class="text-gray-600 leading-relaxed">全面分析互动数据，挖掘有价值信息，辅助决策，提升社交效率</p>
</div>
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
<div class="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center text-purple-600 mb-6">
<i class="fas fa-users text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900">高效群组管理</h3>
<p class="text-gray-600 leading-relaxed">一键管理多个群组，自动化欢迎和群组通知，轻松维护群关系</p>
</div>
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
<div class="w-14 h-14 bg-amber-100 rounded-xl flex items-center justify-center text-amber-600 mb-6">
<i class="fas fa-clock text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900">定时任务系统</h3>
<p class="text-gray-600 leading-relaxed">设置消息定时发送，构建自动化工作流程，解放人力，提高效率</p>
</div>
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
<div class="w-14 h-14 bg-rose-100 rounded-xl flex items-center justify-center text-rose-600 mb-6">
<i class="fas fa-shield-alt text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900">安全容器隔离</h3>
<p class="text-gray-600 leading-relaxed">采用容器化技术，保障账号安全，数据加密存储，保护隐私</p>
</div>
</div>
</div>
</section>
<!-- 使用场景 -->
<section id="use-cases" class="py-20 bg-white relative">
<!-- 使用更柔和的背景 -->
<div class="absolute left-0 right-0 h-64 bg-gray-50/50 top-0"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">应用场景</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">适用于各行各业的微信自动化需求，提升管理效率</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white rounded-2xl shadow-lg p-8 transition-all hover:shadow-xl hover:-translate-y-1">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600 mr-4">
<i class="fas fa-store text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">客户服务</h3>
</div>
<p class="text-gray-600 mb-6 leading-relaxed">自动化客户咨询回复，提供产品信息和服务支持，大幅提升客户满意度与服务效率</p>
<ul class="space-y-3">
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
智能分类和处理客户需求
</li>
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
24小时无间断自动响应
</li>
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
定制化客户服务流程
</li>
</ul>
</div>
<div class="bg-white rounded-2xl shadow-lg p-8 transition-all hover:shadow-xl hover:-translate-y-1">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center text-green-600 mr-4">
<i class="fas fa-bullhorn text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">营销推广</h3>
</div>
<p class="text-gray-600 mb-6 leading-relaxed">精准投放营销内容，管理营销活动，统计用户反馈数据，提升转化率和ROI</p>
<ul class="space-y-3">
<!-- 修正这里的语法错误：将items中心改为items-center -->
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
智能分群精准营销
</li>
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
定时推送营销内容
</li>
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
营销效果数据分析
</li>
</ul>
</div>
<div class="bg-white rounded-2xl shadow-lg p-8 transition-all hover:shadow-xl hover:-translate-y-1">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center text-blue-600 mr-4">
<i class="fas fa-chalkboard-teacher text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">教育培训</h3>
</div>
<p class="text-gray-600 mb-6 leading-relaxed">管理学习群组，自动发送学习资料，组织在线答疑和互动，提升学习体验</p>
<ul class="space-y-3">
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
智能学习进度跟踪
</li>
<!-- 修正此处的错误：将"items中心"改为"items-center" -->
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
自动推送学习资料
</li>
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
智能答疑与互动
</li>
</ul>
</div>
<div class="bg-white rounded-2xl shadow-lg p-8 transition-all hover:shadow-xl hover:-translate-y-1">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center text-purple-600 mr-4">
<i class="fas fa-users-cog text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">团队协作</h3>
</div>
<p class="text-gray-600 mb-6 leading-relaxed">自动化团队通知，日程提醒，简化内部沟通流程，提高协作效率</p>
<ul class="space-y-3">
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
自动项目进度通知
</li>
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
智能会议安排提醒
</li>
<li class="flex items-center text-gray-700">
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
<i class="fas fa-check text-sm"></i>
</span>
团队任务自动分配
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 行动号召区域 - 更优雅 -->
<!-- 修复这里的错误：将"bg白"改为"bg-white" -->
<section class="py-20 relative bg-white overflow-hidden">
<!-- 装饰背景 -->
<div class="absolute inset-0 hero-dots opacity-30"></div>
<div class="absolute top-0 right-0 bottom-0 w-1/3 bg-gradient-to-l from-gray-50 to-transparent"></div>
<div class="absolute top-0 left-0 bottom-0 w-1/3 bg-gradient-to-r from-gray-50 to-transparent"></div>
<div class="container mx-auto px-4 relative z-10 text-center">
<div class="max-w-3xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">准备好提升微信管理效率了吗？</h2>
<p class="text-xl text-gray-600 mb-8">立即体验我们的平台，享受自动化带来的便利与效率</p>
<a href="/login" class="inline-block bg-slate-800 text-white py-4 px-8 rounded-lg shadow-md font-medium text-lg transition-all hover:shadow-lg hover:-translate-y-1">
立即开始使用
</a>
</div>
</div>
</section>
<!-- 页脚 - 更轻盈的设计 -->
<footer class="bg-gray-100 text-gray-600 py-16 border-t border-gray-200">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between">
<div class="mb-10 md:mb-0">
<h3 class="text-xl font-bold mb-4 flex items-center text-slate-700">
<i class="fas fa-robot mr-2"></i> WeChat<span class="text-slate-500">Bot</span>
</h3>
<p class="text-gray-500 mb-6 max-w-md">
智能微信自动化管理平台，为企业和个人提供高效的微信账号管理解决方案
</p>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 hover:text-slate-700 transition-all">
<i class="fab fa-weixin"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 hover:text-slate-700 transition-all">
<i class="fab fa-weibo"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 hover:text-slate-700 transition-all">
<i class="fab fa-github"></i>
</a>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-8">
<div>
<h4 class="text-lg font-semibold mb-4 text-slate-600">产品</h4>
<ul class="space-y-2">
<!-- 修正链接颜色，确保在浅色背景下可见，hover状态修改为深色 -->
<li><a href="#features" class="text-gray-600 hover:text-gray-900 transition-colors">特性</a></li>
<li><a href="#use-cases" class="text-gray-600 hover:text-gray-900 transition-colors">应用场景</a></li>
<li><a href="/api" class="text-gray-600 hover:text-gray-900 transition-colors">API文档</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-slate-600">资源</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">开发文档</a></li>
<li><a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">常见问题</a></li>
<li><a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">使用教程</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-slate-600">关于我们</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">公司介绍</a></li>
<li><a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">联系我们</a></li>
<li><a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">隐私政策</a></li>
</ul>
</div>
</div>
</div>
<div class="border-t border-gray-200 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500">&copy; 2025 WeChatBot 微信机器人管理系统</p>
<p class="text-gray-500 mt-4 md:mt-0">由 <a href="#" class="text-slate-600 hover:text-slate-800">AI团队</a> 精心打造</p>
</div>
</div>
</footer>
<!-- 回到顶部按钮 - 更新为深色调 -->
<button id="back-to-top" class="fixed bottom-6 right-6 bg-slate-800 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all z-50 hover:-translate-y-1 hover:shadow-xl">
<i class="fas fa-arrow-up"></i>
</button>
<script>
// 回到顶部按钮功能
document.addEventListener('DOMContentLoaded', function() {
const backToTopButton = document.getElementById('back-to-top');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
backToTopButton.classList.remove('opacity-0', 'invisible');
backToTopButton.classList.add('opacity-100', 'visible');
} else {
backToTopButton.classList.remove('opacity-100', 'visible');
backToTopButton.classList.add('opacity-0', 'invisible');
}
});
backToTopButton.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 平滑滚动到锚点
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// 导航栏滚动效果
const header = document.querySelector('header');
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
header.classList.add('shadow-md');
} else {
header.classList.remove('shadow-md');
}
});
});
</script>
</body>
</html>

5
internal/view/layouts/main.html
View File

@ -107,13 +107,16 @@
</div>
</header>
<!-- 主内容区 - 已移除侧边栏，占据全宽但内容限制在合理宽度内 -->
<!-- 主内容区 -->
<main class="pt-16 min-h-screen">
<div class="content-container px-4 py-6">
{{embed}}
</div>
</main>
<!-- 移除页脚区域 -->
<!-- 删除原有的页脚代码，包含"产品"、"资源"、"关于我们"等信息 -->
{{else}}
<!-- 无布局模式 -->
{{embed}}

7
internal/view/layouts/responsive_nav.html
View File

@ -1,7 +0,0 @@
<!-- 简化后的移动端导航 -->
<script>
// 移除了复杂的导航功能，采用简化设计
document.addEventListener('DOMContentLoaded', function() {
console.log('简化版界面已加载 - 移除了侧边栏功能');
});
</script>