新增修改
This commit is contained in:
parent
71a9dc556f
commit
16ac159063
662
home.html
662
home.html
|
|
@ -5,15 +5,10 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>后台管理系统</title>
|
||||
<!-- 引入Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="public/login/css/tailwindcss.css"></script>
|
||||
|
||||
<!-- Font Awesome 备选方案 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" onerror="this.onerror=null;this.disabled=true;">
|
||||
|
||||
<!-- Chart.js 备选方案 -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.8/chart.umd.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.8/chart.umd.min.js" onerror="this.onerror=null;this.remove();"></script>
|
||||
<link rel="stylesheet" href="public/login/css/font-awesome.min.css">
|
||||
|
||||
<!-- 配置Tailwind自定义主题 -->
|
||||
<script>
|
||||
|
|
@ -51,6 +46,15 @@
|
|||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(22, 93, 255, 0.1);
|
||||
}
|
||||
.iframe-loading {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s infinite;
|
||||
}
|
||||
@keyframes loading {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -71,22 +75,12 @@
|
|||
.icon-cogs::before { content: "⚙"; }
|
||||
.icon-bell::before { content: "🔔"; }
|
||||
.icon-angle-down::before { content: "▼"; }
|
||||
.icon-angle-up::before { content: "▲"; }
|
||||
.icon-dashboard::before { content: "📊"; }
|
||||
.icon-th-large::before { content: "📋"; }
|
||||
.icon-users::before { content: "👥"; }
|
||||
.icon-shopping-cart::before { content: "🛒"; }
|
||||
.icon-cog::before { content: "🔧"; }
|
||||
.icon-bar-chart::before { content: "📈"; }
|
||||
.icon-question-circle::before { content: "❓"; }
|
||||
.icon-eye::before { content: "👁"; }
|
||||
.icon-arrow-up::before { content: "↑"; }
|
||||
.icon-arrow-down::before { content: "↓"; }
|
||||
.icon-credit-card::before { content: "💳"; }
|
||||
.icon-user-plus::before { content: "👤+"; }
|
||||
.icon-refresh::before { content: "♻"; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-inter bg-neutral text-neutral-dark min-h-screen flex flex-col">
|
||||
<body class="font-inter bg-neutral text-neutral-dark min-h-screen flex flex-col overflow-hidden">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-20 transition-all duration-300" id="header">
|
||||
<div class="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
|
||||
|
|
@ -99,427 +93,73 @@
|
|||
<div class="h-8 w-8 rounded-md bg-primary flex items-center justify-center text-white">
|
||||
<i class="fa fa-cogs icon-cogs"></i>
|
||||
</div>
|
||||
<span class="ml-2 text-lg font-semibold hidden sm:block">AdminPro</span>
|
||||
<span class="ml-2 text-lg font-semibold hidden sm:block">后台管理系统</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧用户信息 -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="text-gray-500 hover:text-primary relative">
|
||||
<!-- <button class="text-gray-500 hover:text-primary relative">
|
||||
<i class="fa fa-bell-o text-xl icon-bell"></i>
|
||||
<span class="absolute top-0 right-0 h-4 w-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">3</span>
|
||||
</button>
|
||||
</button> -->
|
||||
<div class="flex items-center cursor-pointer hover:text-primary">
|
||||
<img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-primary/20">
|
||||
<span class="ml-2 hidden md:block">管理员</span>
|
||||
<i class="fa fa-angle-down ml-1 text-xs icon-angle-down"></i>
|
||||
<!-- <i class="fa fa-angle-down ml-1 text-xs icon-angle-down"></i> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<!-- 侧边栏 - 只保留仪表盘和用户管理 -->
|
||||
<aside id="sidebar" class="fixed left-0 top-16 bottom-0 w-64 bg-white sidebar-shadow transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-10 overflow-y-auto">
|
||||
<nav class="py-4">
|
||||
<div class="px-4 mb-4">
|
||||
<!-- <div class="px-4 mb-4">
|
||||
<div class="text-xs text-gray-400 uppercase font-semibold">主导航</div>
|
||||
</div>
|
||||
|
||||
<!-- 菜单项目 -->
|
||||
<a href="#" class="flex items-center px-4 py-3 text-primary bg-primary/5 border-l-4 border-primary">
|
||||
-->
|
||||
<!-- 仪表盘 -->
|
||||
<a href="#" id="dashboard-link" class="flex items-center px-4 py-3 text-primary bg-primary/5 border-l-4 border-primary">
|
||||
<i class="fa fa-dashboard w-6 icon-dashboard"></i>
|
||||
<span class="ml-2">仪表盘</span>
|
||||
<span class="ml-2">系统管理</span>
|
||||
</a>
|
||||
|
||||
<div class="menu-group">
|
||||
<div class="menu-header flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-50">
|
||||
<div class="flex items-center">
|
||||
<i class="fa fa-th-large w-6 text-gray-500 icon-th-large"></i>
|
||||
<span class="ml-2">内容管理</span>
|
||||
</div>
|
||||
<i class="fa fa-angle-down text-xs text-gray-500 icon-angle-down"></i>
|
||||
</div>
|
||||
<div class="menu-items pl-10">
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-primary">文章管理</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-primary">分类管理</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-primary">评论管理</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary">
|
||||
<!-- 用户管理 -->
|
||||
<a href="#" id="users-link" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary">
|
||||
<i class="fa fa-users w-6 text-gray-500 icon-users"></i>
|
||||
<span class="ml-2">用户管理</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary">
|
||||
<i class="fa fa-shopping-cart w-6 text-gray-500 icon-shopping-cart"></i>
|
||||
<span class="ml-2">订单管理</span>
|
||||
<span class="ml-auto bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">新</span>
|
||||
</a>
|
||||
|
||||
<div class="menu-group">
|
||||
<div class="menu-header flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-50">
|
||||
<div class="flex items-center">
|
||||
<i class="fa fa-cog w-6 text-gray-500 icon-cog"></i>
|
||||
<span class="ml-2">系统设置</span>
|
||||
</div>
|
||||
<i class="fa fa-angle-down text-xs text-gray-500 icon-angle-down"></i>
|
||||
</div>
|
||||
<div class="menu-items pl-10">
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-primary">基本设置</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-primary">安全设置</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-primary">权限管理</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary">
|
||||
<i class="fa fa-bar-chart w-6 text-gray-500 icon-bar-chart"></i>
|
||||
<span class="ml-2">数据统计</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary">
|
||||
<i class="fa fa-question-circle w-6 text-gray-500 icon-question-circle"></i>
|
||||
<span class="ml-2">帮助中心</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="flex-1 pt-16 lg:pl-64 transition-all duration-300">
|
||||
<div class="p-4 sm:p-6 lg:p-8">
|
||||
<!-- 页面标题 -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-dark">仪表盘</h1>
|
||||
<p class="text-gray-500 mt-1">欢迎回来，管理员！这里是您的系统概览</p>
|
||||
<!-- 主内容区域 - 使用IFrame展示页面 -->
|
||||
<main class="flex-1 pt-16 lg:pl-64 transition-all duration-300 h-[calc(100vh-4rem)] overflow-hidden">
|
||||
<!-- 加载遮罩 -->
|
||||
<div id="loading-overlay" class="absolute inset-0 bg-white/80 flex items-center justify-center z-30 hidden">
|
||||
<div class="text-center">
|
||||
<div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary mb-4"></div>
|
||||
<p class="text-gray-600">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IFrame容器 -->
|
||||
<div class="w-full h-full relative">
|
||||
<iframe
|
||||
id="content-iframe"
|
||||
src="about:blank"
|
||||
class="w-full h-full border-0"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
scrolling="auto"
|
||||
></iframe>
|
||||
|
||||
<!-- 数据卡片 -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<!-- 卡片1 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 card-hover">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">今日访问量</p>
|
||||
<h3 class="text-2xl font-bold mt-2">12,458</h3>
|
||||
<p class="text-green-500 text-sm mt-2 flex items-center">
|
||||
<i class="fa fa-arrow-up mr-1 icon-arrow-up"></i> 12.5%
|
||||
<span class="text-gray-500 ml-1">较昨日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center text-primary">
|
||||
<i class="fa fa-eye text-xl icon-eye"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片2 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 card-hover">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">今日订单</p>
|
||||
<h3 class="text-2xl font-bold mt-2">386</h3>
|
||||
<p class="text-green-500 text-sm mt-2 flex items-center">
|
||||
<i class="fa fa-arrow-up mr-1 icon-arrow-up"></i> 8.2%
|
||||
<span class="text-gray-500 ml-1">较昨日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
|
||||
<i class="fa fa-shopping-cart text-xl icon-shopping-cart"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片3 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 card-hover">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">总收入</p>
|
||||
<h3 class="text-2xl font-bold mt-2">¥48,521</h3>
|
||||
<p class="text-green-500 text-sm mt-2 flex items-center">
|
||||
<i class="fa fa-arrow-up mr-1 icon-arrow-up"></i> 5.3%
|
||||
<span class="text-gray-500 ml-1">较昨日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
|
||||
<i class="fa fa-credit-card text-xl icon-credit-card"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片4 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 card-hover">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">新用户注册</p>
|
||||
<h3 class="text-2xl font-bold mt-2">256</h3>
|
||||
<p class="text-red-500 text-sm mt-2 flex items-center">
|
||||
<i class="fa fa-arrow-down mr-1 icon-arrow-down"></i> 2.1%
|
||||
<span class="text-gray-500 ml-1">较昨日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="h-12 w-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-600">
|
||||
<i class="fa fa-user-plus text-xl icon-user-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图表和数据表格 -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- 图表区域 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-semibold text-lg">销售趋势</h3>
|
||||
<div class="flex space-x-2">
|
||||
<button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-md hover:bg-primary/20 transition">本周</button>
|
||||
<button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-md transition">本月</button>
|
||||
<button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-md transition">全年</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-80" id="chart-container">
|
||||
<!-- 图表容器 - 如果Chart.js加载失败会显示替代内容 -->
|
||||
<canvas id="salesChart"></canvas>
|
||||
<div id="chart-fallback" class="hidden h-full flex items-center justify-center text-gray-500">
|
||||
<div class="text-center">
|
||||
<div class="text-4xl mb-2">📈</div>
|
||||
<p>销售趋势图表</p>
|
||||
<div class="mt-4 bg-gray-100 rounded-lg p-4 text-sm">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span>周一</span>
|
||||
<span>¥12,000</span>
|
||||
</div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<span>周二</span>
|
||||
<span>¥19,000</span>
|
||||
</div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<span>周三</span>
|
||||
<span>¥15,000</span>
|
||||
</div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<span>周四</span>
|
||||
<span>¥25,000</span>
|
||||
</div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<span>周五</span>
|
||||
<span>¥22,000</span>
|
||||
</div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<span>周六</span>
|
||||
<span>¥30,000</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>周日</span>
|
||||
<span>¥32,000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 热门商品 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<h3 class="font-semibold text-lg mb-6">热门商品</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/26/60/60" alt="商品图片" class="h-12 w-12 rounded-md object-cover">
|
||||
<div class="ml-3 flex-1">
|
||||
<h4 class="font-medium">智能手表 Pro</h4>
|
||||
<p class="text-sm text-gray-500">¥1,299</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="font-semibold">1,245</p>
|
||||
<p class="text-xs text-green-500">+12.5%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/96/60/60" alt="商品图片" class="h-12 w-12 rounded-md object-cover">
|
||||
<div class="ml-3 flex-1">
|
||||
<h4 class="font-medium">无线耳机 Max</h4>
|
||||
<p class="text-sm text-gray-500">¥899</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="font-semibold">987</p>
|
||||
<p class="text-xs text-green-500">+8.3%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/119/60/60" alt="商品图片" class="h-12 w-12 rounded-md object-cover">
|
||||
<div class="ml-3 flex-1">
|
||||
<h4 class="font-medium">智能音箱 Mini</h4>
|
||||
<p class="text-sm text-gray-500">¥399</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="font-semibold">756</p>
|
||||
<p class="text-xs text-red-500">-2.1%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/180/60/60" alt="商品图片" class="h-12 w-12 rounded-md object-cover">
|
||||
<div class="ml-3 flex-1">
|
||||
<h4 class="font-medium">运动手环</h4>
|
||||
<p class="text-sm text-gray-500">¥199</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="font-semibold">623</p>
|
||||
<p class="text-xs text-green-500">+5.7%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/201/60/60" alt="商品图片" class="h-12 w-12 rounded-md object-cover">
|
||||
<div class="ml-3 flex-1">
|
||||
<h4 class="font-medium">智能门锁</h4>
|
||||
<p class="text-sm text-gray-500">¥1,599</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="font-semibold">432</p>
|
||||
<p class="text-xs text-green-500">+15.2%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近订单 -->
|
||||
<div class="mt-6 bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="p-6 border-b">
|
||||
<h3 class="font-semibold text-lg">最近订单</h3>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单编号</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">#ORD-7821</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/1027/40/40" alt="用户头像" class="h-8 w-8 rounded-full">
|
||||
<div class="ml-3">
|
||||
<div class="text-sm font-medium">张三</div>
|
||||
<div class="text-xs text-gray-500">zhangsan@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">¥2,399.00</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||||
<button class="text-gray-500 hover:text-gray-700">编辑</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">#ORD-7820</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/1066/40/40" alt="用户头像" class="h-8 w-8 rounded-full">
|
||||
<div class="ml-3">
|
||||
<div class="text-sm font-medium">李四</div>
|
||||
<div class="text-xs text-gray-500">lisi@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">¥1,299.00</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">处理中</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||||
<button class="text-gray-500 hover:text-gray-700">编辑</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">#ORD-7819</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/1074/40/40" alt="用户头像" class="h-8 w-8 rounded-full">
|
||||
<div class="ml-3">
|
||||
<div class="text-sm font-medium">王五</div>
|
||||
<div class="text-xs text-gray-500">wangwu@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">¥899.00</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">待发货</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||||
<button class="text-gray-500 hover:text-gray-700">编辑</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">#ORD-7818</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/1062/40/40" alt="用户头像" class="h-8 w-8 rounded-full">
|
||||
<div class="ml-3">
|
||||
<div class="text-sm font-medium">赵六</div>
|
||||
<div class="text-xs text-gray-500">zhaoliu@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">¥399.00</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">已取消</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||||
<button class="text-gray-500 hover:text-gray-700">编辑</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">#ORD-7817</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/1083/40/40" alt="用户头像" class="h-8 w-8 rounded-full">
|
||||
<div class="ml-3">
|
||||
<div class="text-sm font-medium">孙七</div>
|
||||
<div class="text-xs text-gray-500">sunqi@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">¥1,599.00</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-13</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||||
<button class="text-gray-500 hover:text-gray-700">编辑</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-6 py-4 border-t flex items-center justify-between">
|
||||
<p class="text-sm text-gray-500">显示 1 至 5 条，共 24 条</p>
|
||||
<div class="flex space-x-1">
|
||||
<button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50" disabled>上一页</button>
|
||||
<button class="px-3 py-1 rounded border border-primary bg-primary text-white">1</button>
|
||||
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">2</button>
|
||||
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">3</button>
|
||||
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">下一页</button>
|
||||
</div>
|
||||
<!-- 默认内容提示 -->
|
||||
<div id="default-content" class="absolute inset-0 flex items-center justify-center bg-neutral">
|
||||
<div class="text-center">
|
||||
<i class="fa fa-dashboard text-5xl text-gray-300 mb-4 icon-dashboard"></i>
|
||||
<h3 class="text-xl font-semibold text-gray-500 mb-2">欢迎使用管理系统</h3>
|
||||
<p class="text-gray-400">请从左侧菜单选择要查看的页面</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -530,11 +170,28 @@
|
|||
|
||||
<!-- JavaScript -->
|
||||
<script>
|
||||
// 页面URL配置
|
||||
const PAGE_URLS = {
|
||||
index: 'public/html/index.html', // 仪表盘页面URL
|
||||
user: 'public/html/user.html' // 用户管理页面URL
|
||||
};
|
||||
|
||||
// 菜单切换
|
||||
const menuToggle = document.getElementById('menu-toggle');
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const overlay = document.getElementById('overlay');
|
||||
const loadingOverlay = document.getElementById('loading-overlay');
|
||||
const defaultContent = document.getElementById('default-content');
|
||||
const contentIframe = document.getElementById('content-iframe');
|
||||
|
||||
// 导航链接
|
||||
const dashboardLink = document.getElementById('dashboard-link');
|
||||
const usersLink = document.getElementById('users-link');
|
||||
|
||||
// 初始化默认页面
|
||||
let currentPage = 'index';
|
||||
|
||||
// 菜单切换逻辑
|
||||
menuToggle.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('-translate-x-full');
|
||||
overlay.classList.toggle('hidden');
|
||||
|
|
@ -547,78 +204,103 @@
|
|||
document.body.classList.remove('overflow-hidden');
|
||||
});
|
||||
|
||||
// 子菜单展开/折叠
|
||||
const menuHeaders = document.querySelectorAll('.menu-header');
|
||||
// 显示加载状态
|
||||
function showLoading() {
|
||||
loadingOverlay.classList.remove('hidden');
|
||||
defaultContent.classList.add('hidden');
|
||||
}
|
||||
|
||||
menuHeaders.forEach(header => {
|
||||
header.addEventListener('click', () => {
|
||||
const icon = header.querySelector('.fa-angle-down, .icon-angle-down');
|
||||
const menuItems = header.nextElementSibling;
|
||||
// 隐藏加载状态
|
||||
function hideLoading() {
|
||||
loadingOverlay.classList.add('hidden');
|
||||
}
|
||||
|
||||
// 更新导航菜单激活状态
|
||||
function updateNavActive(page) {
|
||||
// 重置所有链接样式
|
||||
dashboardLink.classList.remove('text-primary', 'bg-primary/5', 'border-l-4', 'border-primary');
|
||||
dashboardLink.classList.add('text-gray-600', 'hover:bg-gray-50', 'hover:text-primary');
|
||||
|
||||
usersLink.classList.remove('text-primary', 'bg-primary/5', 'border-l-4', 'border-primary');
|
||||
usersLink.classList.add('text-gray-600', 'hover:bg-gray-50', 'hover:text-primary');
|
||||
|
||||
// 设置当前页面链接样式
|
||||
if (page === 'index') {
|
||||
dashboardLink.classList.remove('text-gray-600', 'hover:bg-gray-50', 'hover:text-primary');
|
||||
dashboardLink.classList.add('text-primary', 'bg-primary/5', 'border-l-4', 'border-primary');
|
||||
} else if (page === 'users') {
|
||||
usersLink.classList.remove('text-gray-600', 'hover:bg-gray-50', 'hover:text-primary');
|
||||
usersLink.classList.add('text-primary', 'bg-primary/5', 'border-l-4', 'border-primary');
|
||||
}
|
||||
}
|
||||
|
||||
// 加载页面到IFrame
|
||||
function loadPage(page) {
|
||||
if (currentPage === page) return;
|
||||
|
||||
showLoading();
|
||||
updateNavActive(page);
|
||||
|
||||
// 设置IFrame源
|
||||
contentIframe.src = PAGE_URLS[page];
|
||||
|
||||
// 监听IFrame加载完成
|
||||
contentIframe.onload = function() {
|
||||
hideLoading();
|
||||
currentPage = page;
|
||||
|
||||
icon.classList.toggle('rotate-180');
|
||||
icon.classList.toggle('icon-angle-up');
|
||||
icon.classList.toggle('icon-angle-down');
|
||||
menuItems.classList.toggle('hidden');
|
||||
});
|
||||
// 移动端自动隐藏侧边栏
|
||||
if (window.innerWidth < 1024) {
|
||||
sidebar.classList.add('-translate-x-full');
|
||||
overlay.classList.add('hidden');
|
||||
}
|
||||
};
|
||||
|
||||
// 处理IFrame加载错误
|
||||
contentIframe.onerror = function() {
|
||||
hideLoading();
|
||||
// 显示错误页面或备用内容
|
||||
contentIframe.src = `about:blank`;
|
||||
|
||||
// 创建错误提示内容
|
||||
const errorHtml ='' ;
|
||||
// 写入错误提示到IFrame
|
||||
contentIframe.contentDocument.open();
|
||||
contentIframe.contentDocument.write(errorHtml);
|
||||
contentIframe.contentDocument.close();
|
||||
};
|
||||
}
|
||||
|
||||
// 刷新当前页面
|
||||
function reloadCurrentPage() {
|
||||
showLoading();
|
||||
contentIframe.src = contentIframe.src;
|
||||
}
|
||||
|
||||
// 暴露刷新函数到window对象供IFrame调用
|
||||
window.reloadCurrentPage = reloadCurrentPage;
|
||||
|
||||
// 导航链接点击事件
|
||||
dashboardLink.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
loadPage('index');
|
||||
});
|
||||
|
||||
// 初始化图表 - 添加错误处理
|
||||
usersLink.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
loadPage('user');
|
||||
});
|
||||
|
||||
// 初始化加载仪表盘页面
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
try {
|
||||
// 检查Chart是否加载成功
|
||||
if (typeof Chart !== 'undefined') {
|
||||
const ctx = document.getElementById('salesChart').getContext('2d');
|
||||
|
||||
const salesChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
datasets: [
|
||||
{
|
||||
label: '销售额',
|
||||
data: [12000, 19000, 15000, 25000, 22000, 30000, 32000],
|
||||
borderColor: '#165DFF',
|
||||
backgroundColor: 'rgba(22, 93, 255, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.4
|
||||
},
|
||||
{
|
||||
label: '订单量',
|
||||
data: [120, 190, 150, 250, 220, 300, 320],
|
||||
borderColor: '#36CFC9',
|
||||
backgroundColor: 'transparent',
|
||||
borderDash: [5, 5],
|
||||
tension: 0.4
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
duration: 2000,
|
||||
easing: 'easeOutQuart'
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 如果Chart未加载，显示备用内容
|
||||
document.getElementById('chart-fallback').classList.remove('hidden');
|
||||
}
|
||||
} catch (error) {
|
||||
// 发生错误时显示备用内容
|
||||
document.getElementById('chart-fallback').classList.remove('hidden');
|
||||
console.log('Chart.js加载失败，显示备用内容');
|
||||
loadPage('index');
|
||||
});
|
||||
|
||||
// 响应式处理
|
||||
window.addEventListener('resize', () => {
|
||||
if (window.innerWidth >= 1024) {
|
||||
sidebar.classList.remove('-translate-x-full');
|
||||
overlay.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -631,32 +313,6 @@
|
|||
header.classList.remove('shadow');
|
||||
}
|
||||
});
|
||||
|
||||
// 检查Font Awesome是否加载成功
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setTimeout(function() {
|
||||
const testIcon = document.createElement('i');
|
||||
testIcon.className = 'fa fa-test';
|
||||
document.body.appendChild(testIcon);
|
||||
|
||||
// 检查图标是否正常显示
|
||||
const computedStyle = window.getComputedStyle(testIcon);
|
||||
if (computedStyle.getPropertyValue('font-family') !== 'FontAwesome' &&
|
||||
!document.querySelector('.fa-bars').classList.contains('fa-bars')) {
|
||||
// Font Awesome加载失败，使用备用图标类
|
||||
document.querySelectorAll('.fa').forEach(el => {
|
||||
const classes = Array.from(el.classList);
|
||||
const iconClass = classes.find(c => c.startsWith('fa-') && c !== 'fa');
|
||||
if (iconClass) {
|
||||
const iconName = iconClass.replace('fa-', 'icon-');
|
||||
el.classList.add(iconName);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.body.removeChild(testIcon);
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -101,10 +101,13 @@
|
|||
uuid:uuid
|
||||
}),
|
||||
success : function(data) {
|
||||
$('#verifyCode').val('')
|
||||
if(data && data.code){
|
||||
if(data.code=='200'){
|
||||
//登录成功
|
||||
window.location.href="home.html";
|
||||
}else{
|
||||
|
||||
$("#info").html(data.msg);
|
||||
getVerifyCode();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,237 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>仪表盘</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.8/chart.umd.min.js"></script>
|
||||
|
||||
<style type="text/tailwindcss">
|
||||
@layer utilities {
|
||||
.card-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(22, 93, 255, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-neutral text-gray-800 p-4 sm:p-6 lg:p-8">
|
||||
<!-- 页面标题 -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">仪表盘</h1>
|
||||
<p class="text-gray-500 mt-1">欢迎回来，管理员！这里是您的系统概览</p>
|
||||
</div>
|
||||
|
||||
<!-- 数据卡片 - 核心指标 -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<!-- 总用户数 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 card-hover">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">总用户数</p>
|
||||
<h3 class="text-2xl font-bold mt-2">12,458</h3>
|
||||
<p class="text-green-500 text-sm mt-2 flex items-center">
|
||||
<i class="fa fa-arrow-up mr-1"></i> 12.5%
|
||||
<span class="text-gray-500 ml-1">较上月</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center text-primary">
|
||||
<i class="fa fa-users text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增用户 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 card-hover">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">本月新增用户</p>
|
||||
<h3 class="text-2xl font-bold mt-2">386</h3>
|
||||
<p class="text-green-500 text-sm mt-2 flex items-center">
|
||||
<i class="fa fa-arrow-up mr-1"></i> 8.2%
|
||||
<span class="text-gray-500 ml-1">较上月</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
|
||||
<i class="fa fa-user-plus text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 活跃用户 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 card-hover">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">今日活跃用户</p>
|
||||
<h3 class="text-2xl font-bold mt-2">2,521</h3>
|
||||
<p class="text-green-500 text-sm mt-2 flex items-center">
|
||||
<i class="fa fa-arrow-up mr-1"></i> 5.3%
|
||||
<span class="text-gray-500 ml-1">较昨日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
|
||||
<i class="fa fa-eye text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 付费用户 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 card-hover">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">付费用户数</p>
|
||||
<h3 class="text-2xl font-bold mt-2">256</h3>
|
||||
<p class="text-red-500 text-sm mt-2 flex items-center">
|
||||
<i class="fa fa-arrow-down mr-1"></i> 2.1%
|
||||
<span class="text-gray-500 ml-1">较昨日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="h-12 w-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-600">
|
||||
<i class="fa fa-credit-card text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户增长趋势图表 -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||||
<!-- 图表区域 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-semibold text-lg">用户增长趋势</h3>
|
||||
<div class="flex space-x-2">
|
||||
<button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-md hover:bg-primary/20 transition">本周</button>
|
||||
<button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-md transition">本月</button>
|
||||
<button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-md transition">全年</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-80">
|
||||
<canvas id="userGrowthChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户分布 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<h3 class="font-semibold text-lg mb-6">用户分布</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-sm font-medium">普通用户</span>
|
||||
<span class="text-sm">85%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div class="bg-primary h-2 rounded-full" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-sm font-medium">VIP用户</span>
|
||||
<span class="text-sm">12%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div class="bg-purple-500 h-2 rounded-full" style="width: 12%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-sm font-medium">管理员</span>
|
||||
<span class="text-sm">2%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div class="bg-green-500 h-2 rounded-full" style="width: 2%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-sm font-medium">测试账号</span>
|
||||
<span class="text-sm">1%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div class="bg-yellow-500 h-2 rounded-full" style="width: 1%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 pt-6 border-t">
|
||||
<h4 class="font-medium mb-4">用户活跃度</h4>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-gray-50 p-3 rounded-lg text-center">
|
||||
<p class="text-xs text-gray-500">日活跃率</p>
|
||||
<p class="text-xl font-bold text-primary">28.5%</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-3 rounded-lg text-center">
|
||||
<p class="text-xs text-gray-500">周活跃率</p>
|
||||
<p class="text-xl font-bold text-primary">65.3%</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-3 rounded-lg text-center">
|
||||
<p class="text-xs text-gray-500">月活跃率</p>
|
||||
<p class="text-xl font-bold text-primary">82.1%</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-3 rounded-lg text-center">
|
||||
<p class="text-xs text-gray-500">留存率</p>
|
||||
<p class="text-xl font-bold text-primary">78.9%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 初始化用户增长图表
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const ctx = document.getElementById('userGrowthChart').getContext('2d');
|
||||
|
||||
const userGrowthChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
datasets: [
|
||||
{
|
||||
label: '新增用户',
|
||||
data: [120, 190, 150, 250, 220, 300, 320],
|
||||
borderColor: '#165DFF',
|
||||
backgroundColor: 'rgba(22, 93, 255, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.4
|
||||
},
|
||||
{
|
||||
label: '活跃用户',
|
||||
data: [850, 920, 880, 950, 980, 1100, 1050],
|
||||
borderColor: '#36CFC9',
|
||||
backgroundColor: 'transparent',
|
||||
borderDash: [5, 5],
|
||||
tension: 0.4
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
duration: 2000,
|
||||
easing: 'easeOutQuart'
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>用户管理</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
|
||||
<style type="text/tailwindcss">
|
||||
@layer utilities {
|
||||
.table-hover {
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-neutral text-gray-800 p-4 sm:p-6 lg:p-8">
|
||||
<!-- 页面标题和操作区 -->
|
||||
<div class="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">用户管理</h1>
|
||||
<p class="text-gray-500 mt-1">管理系统中的所有用户账号和权限</p>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索用户..."
|
||||
class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-full sm:w-64"
|
||||
>
|
||||
<i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
||||
</div>
|
||||
<button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition flex items-center justify-center">
|
||||
<i class="fa fa-plus mr-2"></i>新增用户
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选和批量操作 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<div class="relative">
|
||||
<select class="appearance-none pl-4 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white">
|
||||
<option>所有角色</option>
|
||||
<option>管理员</option>
|
||||
<option>普通用户</option>
|
||||
<option>VIP用户</option>
|
||||
<option>测试账号</option>
|
||||
</select>
|
||||
<i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"></i>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<select class="appearance-none pl-4 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white">
|
||||
<option>所有状态</option>
|
||||
<option>正常</option>
|
||||
<option>禁用</option>
|
||||
<option>未激活</option>
|
||||
</select>
|
||||
<i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"></i>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<select class="appearance-none pl-4 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white">
|
||||
<option>按时间排序</option>
|
||||
<option>按用户名排序</option>
|
||||
<option>按注册时间排序</option>
|
||||
<option>按最后登录排序</option>
|
||||
</select>
|
||||
<i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition flex items-center">
|
||||
<i class="fa fa-filter mr-2"></i>筛选
|
||||
</button>
|
||||
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition flex items-center">
|
||||
<i class="fa fa-download mr-2"></i>导出
|
||||
</button>
|
||||
<button class="px-4 py-2 border border-red-300 text-red-600 rounded-lg hover:bg-red-50 transition flex items-center">
|
||||
<i class="fa fa-trash mr-2"></i>批量删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户列表 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-12">
|
||||
<input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户信息</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">注册时间</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最后登录</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tr class="table-hover hover:bg-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="h-10 w-10 rounded-full">
|
||||
<div class="ml-4">
|
||||
<div class="text-sm font-medium text-gray-900">张三</div>
|
||||
<div class="text-xs text-gray-500">zhangsan@example.com</div>
|
||||
<div class="text-xs text-gray-500 mt-1">ID: #10001</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">管理员</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">正常</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
2023-01-15<br>10:25:36
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
2023-06-15<br>09:42:18
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||||
<button class="text-gray-600 hover:text-gray-900 mr-3">编辑</button>
|
||||
<button class="text-red-600 hover:text-red-900">禁用</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="table-hover hover:bg-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/1012/40/40" alt="用户头像" class="h-10 w-10 rounded-full">
|
||||
<div class="ml-4">
|
||||
<div class="text-sm font-medium text-gray-900">李四</div>
|
||||
<div class="text-xs text-gray-500">lisi@example.com</div>
|
||||
<div class="text-xs text-gray-500 mt-1">ID: #10002</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">VIP用户</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">正常</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
2023-02-18<br>14:32:45
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
2023-06-14<br>16:18:29
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||||
<button class="text-gray-600 hover:text-gray-900 mr-3">编辑</button>
|
||||
<button class="text-red-600 hover:text-red-900">禁用</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="table-hover hover:bg-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/1025/40/40" alt="用户头像" class="h-10 w-10 rounded-full">
|
||||
<div class="ml-4">
|
||||
<div class="text-sm font-medium text-gray-900">王五</div>
|
||||
<div class="text-xs text-gray-500">wangwu@example.com</div>
|
||||
<div class="text-xs text-gray-500 mt-1">ID: #10003</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">普通用户</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">未激活</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
2023-03-22<br>09:15:12
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
从未登录
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||||
<button class="text-gray-600 hover:text-gray-900 mr-3">编辑</button>
|
||||
<button class="text-red-600 hover:text-red-900">禁用</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="table-hover hover:bg-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/1074/40/40" alt="用户头像" class="h-10 w-10 rounded-full">
|
||||
<div class="ml-4">
|
||||
<div class="text-sm font-medium text-gray-900">赵六</div>
|
||||
<div class="text-xs text-gray-500">zhaoliu@example.com</div>
|
||||
<div class="text-xs text-gray-500 mt-1">ID: #10004</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">普通用户</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">禁用</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
2023-04-30<br>11:45:33
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
2023-05-18<br>15:22:47
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||||
<button class="text-gray-600 hover:text-gray-900 mr-3">编辑</button>
|
||||
<button class="text-green-600 hover:text-green-900">启用</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="table-hover hover:bg-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<img src="https://picsum.photos/id/1066/40/40" alt="用户头像" class="h-10 w-10 rounded-full">
|
||||
<div class="ml-4">
|
||||
<div class="text-sm font-medium text-gray-900">孙七</div>
|
||||
<div class="text-xs text-gray-500">sunqi@example.com</div>
|
||||
<div class="text-xs text-gray-500 mt-1">ID: #10005</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">VIP用户</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">正常</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
2023-05-12<br>16:28:49
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
2023-06-15<br>08:10:35
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||||
<button class="text-gray-600 hover:text-gray-900 mr-3">编辑</button>
|
||||
<button class="text-red-600 hover:text-red-900">禁用</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="px-6 py-4 border-t flex items-center justify-between">
|
||||
<p class="text-sm text-gray-500">显示 1 至 5 条，共 12,458 条</p>
|
||||
<div class="flex space-x-1">
|
||||
<button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50" disabled>上一页</button>
|
||||
<button class="px-3 py-1 rounded border border-primary bg-primary text-white">1</button>
|
||||
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">2</button>
|
||||
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">3</button>
|
||||
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">4</button>
|
||||
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">5</button>
|
||||
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">下一页</button>
|
||||
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">最后一页</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue