bonus
/
ys_sms_sending_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

This commit is contained in:
BianLzhaoMin 2026-01-30 15:44:50 +08:00
parent df29accb3a
commit 63ea240e1a
2 changed files with 652 additions and 346 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

579
src/views/index.vue
View File

@ -1,419 +1,306 @@
<template>
<div class="home">
<section class="home-hero">
<div class="home-hero-main">
<p class="home-tag">短信发送系统 · 首页</p>
<div class="home-container">
<!-- 背景网格 -->
<div class="grid-background"></div>
<!-- 主要内容 -->
<div class="home-content">
<div class="home-tag-wrapper">
<el-icon class="tag-icon"><Message /></el-icon>
<span class="home-tag">短信发送系统 · 首页</span>
</div>
<h1 class="home-title">
欢迎进入<br />
短信发送管理系统
<span class="title-line">欢迎进入</span>
<span class="title-line highlight">短信发送管理系统</span>
</h1>
<p class="home-subtitle">
高效、便捷的短信发送管理平台，支持单次发送和循环发送，轻松管理短信任务和接收人员。
</p>
</div>
<div class="home-hero-panel">
<div class="panel-header">今日概览</div>
<div class="panel-body">
<div class="panel-item">
<span class="panel-label">今日发送</span>
<span class="panel-value">{{ todayStats.sendCount || '—' }}</span>
</div>
<div class="panel-item">
<span class="panel-label">成功发送</span>
<span class="panel-value">{{ todayStats.successCount || '—' }}</span>
</div>
<div class="panel-item">
<span class="panel-label">待发送任务</span>
<span class="panel-value">{{ todayStats.pendingCount || '—' }}</span>
</div>
</div>
<div class="panel-footer">数据接入后将在此区域展示核心指标。</div>
</div>
</section>
<section class="home-grid">
<el-card shadow="hover" class="home-card" @click="navigateTo('/sms/onceSend')">
<div class="card-icon">
<el-icon :size="32" color="#1677ff">
<Message />
</el-icon>
</div>
<h3>单次发送</h3>
<p>
快速发送单条短信，支持选择接收人员和自定义短信内容，适用于临时通知和紧急消息。
</p>
</el-card>
<el-card shadow="hover" class="home-card" @click="navigateTo('/sms/loopSend')">
<div class="card-icon">
<el-icon :size="32" color="#52c41a">
<Refresh />
</el-icon>
</div>
<h3>循环发送</h3>
<p>
基于 Cron 表达式的定时发送任务，支持按计划自动发送短信，适用于定期通知和提醒。
</p>
</el-card>
<el-card
shadow="hover"
class="home-card"
@click="navigateTo('/basicManage/personManage')"
>
<div class="card-icon">
<el-icon :size="32" color="#fa8c16">
<User />
</el-icon>
</div>
<h3>人员管理</h3>
<p>
管理系统中的接收人员信息，包括姓名、电话、所属部门等基础数据，为短信发送提供数据源。
</p>
</el-card>
<el-card
shadow="hover"
class="home-card"
@click="navigateTo('/basicManage/groupManage')"
>
<div class="card-icon">
<el-icon :size="32" color="#eb2f96">
<UserFilled />
</el-icon>
</div>
<h3>分组管理</h3>
<p>创建和管理人员分组，快速选择批量接收人员，提高短信发送效率。</p>
</el-card>
</section>
<section class="home-features">
<h2 class="features-title">核心功能</h2>
<div class="features-grid">
<div class="feature-item">
<el-icon :size="24" color="#1677ff">
<Clock />
</el-icon>
<div class="feature-content">
<h4>定时发送</h4>
<p>支持 Cron 表达式配置，灵活设置发送时间</p>
</div>
</div>
<div class="feature-item">
<el-icon :size="24" color="#52c41a">
<User />
</el-icon>
<div class="feature-content">
<h4>批量选择</h4>
<p>支持按人员或分组批量选择接收人</p>
</div>
</div>
<div class="feature-item">
<el-icon :size="24" color="#fa8c16">
<Document />
</el-icon>
<div class="feature-content">
<h4>任务管理</h4>
<p>统一管理所有发送任务，支持启用/停用</p>
</div>
</div>
<div class="feature-item">
<el-icon :size="24" color="#eb2f96">
<View />
</el-icon>
<div class="feature-content">
<h4>发送记录</h4>
<p>查看详细的发送记录和状态信息</p>
<!-- 装饰性图标 -->
<div class="decorative-icons">
<div
class="icon-item"
v-for="(icon, index) in icons"
:key="index"
:style="{ animationDelay: `${index * 0.2}s` }"
>
<el-icon :size="24"><component :is="icon" /></el-icon>
</div>
</div>
</div>
</section>
</div>
</div>
</template>
<script setup name="Index">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Message, Refresh, User, UserFilled, Clock, Document, View } from '@element-plus/icons-vue'
import { Message, Bell, Document, Setting, DataAnalysis, Connection } from '@element-plus/icons-vue'
const router = useRouter()
// 今日统计数据（后续可从接口获取）
const todayStats = ref({
sendCount: null,
successCount: null,
pendingCount: null,
})
// 导航到指定路由
const navigateTo = (path) => {
router.push(path)
}
// 装饰性图标列表
const icons = ref([Message, Bell, Document, Setting, DataAnalysis, Connection])
</script>
<style lang="scss" scoped>
.home {
gap: 40px;
// height: 100vh;
height: 100%;
position: relative;
display: flex;
min-height: 100%;
flex-direction: column;
padding: 40px 48px 48px;
background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 50%, #e6f4ff 100%);
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f0f7ff 0%, #e6f4ff 50%, #d6e4ff 100%);
overflow: hidden;
}
.home-hero {
gap: 32px;
display: grid;
align-items: stretch;
grid-template-columns: minmax(0, 2fr) minmax(320px, 1.4fr);
// 网格背景
.grid-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(rgba(22, 119, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(22, 119, 255, 0.08) 1px, transparent 1px);
background-size: 50px 50px;
animation: gridMove 20s linear infinite;
opacity: 0.4;
}
.home-hero-main {
@keyframes gridMove {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(50px, 50px);
}
}
.home-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 1200px;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.home-content {
text-align: center;
animation: fadeInUp 0.8s ease-out;
width: 100%;
max-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 680px;
align-items: center;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.home-tag-wrapper {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
border-radius: 30px;
font-size: 13px;
letter-spacing: 0.5px;
color: #1677ff;
background: rgba(22, 119, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(22, 119, 255, 0.2);
margin-bottom: 30px;
animation: pulse 2s ease-in-out infinite;
box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
}
@keyframes pulse {
0%,
100% {
box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
}
50% {
box-shadow: 0 4px 12px rgba(22, 119, 255, 0.25);
}
}
.tag-icon {
font-size: 16px;
animation: rotate 3s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.home-tag {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #1677ff;
background: rgba(22, 119, 255, 0.1);
margin-bottom: 20px;
width: fit-content;
font-weight: 500;
}
.home-title {
font-size: 42px;
line-height: 1.3;
font-size: 48px;
line-height: 1.4;
font-weight: 700;
color: #1f2937;
margin: 0 0 20px;
background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
margin: 0;
margin-bottom: 40px;
display: flex;
flex-direction: column;
gap: 16px;
}
.title-line {
display: block;
color: #303133;
animation: slideInLeft 0.8s ease-out;
&:nth-child(2) {
animation-delay: 0.2s;
animation-fill-mode: both;
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.highlight {
background: linear-gradient(135deg, #1677ff 0%, #4096ff 50%, #69b1ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
animation: shimmer 3s ease-in-out infinite;
}
.home-subtitle {
margin: 0;
font-size: 16px;
line-height: 1.8;
color: #4b5563;
}
.home-hero-panel {
border-radius: 20px;
background: linear-gradient(145deg, #1677ff 0%, #4096ff 45%, #69b1ff 100%);
box-shadow: 0 20px 50px rgba(22, 119, 255, 0.3);
color: #ffffff;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
&:hover {
transform: translateY(-4px);
box-shadow: 0 24px 60px rgba(22, 119, 255, 0.4);
@keyframes shimmer {
0%,
100% {
filter: brightness(1);
}
50% {
filter: brightness(1.3);
}
}
.panel-header {
padding: 20px 24px 12px;
font-size: 16px;
font-weight: 600;
opacity: 0.95;
}
.panel-body {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 16px 24px 12px;
gap: 12px;
}
.panel-item {
padding: 16px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
// 装饰性图标
.decorative-icons {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
transition: background 0.3s ease;
&:hover {
background: rgba(255, 255, 255, 0.2);
}
}
.panel-label {
font-size: 13px;
opacity: 0.9;
font-weight: 500;
}
.panel-value {
font-size: 24px;
font-weight: 700;
line-height: 1.2;
}
.panel-footer {
padding: 16px 24px 20px;
font-size: 13px;
opacity: 0.85;
border-top: 1px solid rgba(255, 255, 255, 0.2);
margin-top: auto;
}
.home-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
justify-content: center;
gap: 24px;
flex-wrap: wrap;
margin-top: 40px;
}
.home-card {
border-radius: 18px;
overflow: hidden;
.icon-item {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(22, 119, 255, 0.15);
color: #1677ff;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid transparent;
animation: float 3s ease-in-out infinite;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(22, 119, 255, 0.1);
&:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
border-color: #e6f4ff;
background: rgba(22, 119, 255, 0.1);
border-color: rgba(22, 119, 255, 0.3);
transform: translateY(-5px) scale(1.1);
box-shadow: 0 6px 16px rgba(22, 119, 255, 0.2);
color: #0958d9;
}
}
.home-card :deep(.el-card__body) {
padding: 24px;
}
.card-icon {
margin-bottom: 16px;
display: inline-flex;
padding: 12px;
border-radius: 12px;
background: linear-gradient(135deg, #e6f4ff 0%, #f0f7ff 100%);
}
.home-card h3 {
margin: 0 0 12px;
font-size: 20px;
font-weight: 600;
color: #111827;
}
.home-card p {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: #4b5563;
}
.home-features {
margin-top: 8px;
}
.features-title {
font-size: 24px;
font-weight: 600;
color: #1f2937;
margin: 0 0 24px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
border-radius: 12px;
background: #ffffff;
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
&:hover {
border-color: #1677ff;
box-shadow: 0 4px 12px rgba(22, 119, 255, 0.1);
transform: translateY(-2px);
}
}
.feature-content {
flex: 1;
}
.feature-content h4 {
margin: 0 0 6px;
font-size: 16px;
font-weight: 600;
color: #1f2937;
}
.feature-content p {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: #6b7280;
}
@media (max-width: 1024px) {
.home {
padding: 32px 32px 40px;
}
.home-hero {
grid-template-columns: 1fr;
}
.home-hero-panel {
order: -1;
}
.home-title {
font-size: 36px;
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
// 响应式设计
@media (max-width: 768px) {
.home {
padding: 24px 20px 32px;
gap: 32px;
}
.home-hero {
gap: 24px;
.home-container {
padding: 15px;
}
.home-title {
font-size: 28px;
font-size: 32px;
margin-bottom: 30px;
gap: 12px;
}
.home-grid {
grid-template-columns: 1fr;
gap: 20px;
.home-tag-wrapper {
font-size: 12px;
padding: 6px 16px;
margin-bottom: 24px;
}
.features-grid {
grid-template-columns: 1fr;
.decorative-icons {
gap: 16px;
margin-top: 30px;
}
.panel-body {
grid-template-columns: 1fr;
.icon-item {
width: 48px;
height: 48px;
}
}
@media (max-width: 480px) {
.home-title {
font-size: 24px;
margin-bottom: 24px;
gap: 10px;
}
.home-tag-wrapper {
margin-bottom: 20px;
}
.decorative-icons {
gap: 12px;
margin-top: 24px;
}
.icon-item {
width: 44px;
height: 44px;
}
}
</style>

419
src/views/index_old.vue Normal file
View File

@ -0,0 +1,419 @@
<template>
<div class="home">
<section class="home-hero">
<div class="home-hero-main">
<p class="home-tag">短信发送系统 · 首页</p>
<h1 class="home-title">
欢迎进入<br />
短信发送管理系统
</h1>
<!-- <p class="home-subtitle">
高效、便捷的短信发送管理平台，支持单次发送和循环发送，轻松管理短信任务和接收人员。
</p> -->
</div>
<!-- <div class="home-hero-panel">
<div class="panel-header">今日概览</div>
<div class="panel-body">
<div class="panel-item">
<span class="panel-label">今日发送</span>
<span class="panel-value">{{ todayStats.sendCount || '—' }}</span>
</div>
<div class="panel-item">
<span class="panel-label">成功发送</span>
<span class="panel-value">{{ todayStats.successCount || '—' }}</span>
</div>
<div class="panel-item">
<span class="panel-label">待发送任务</span>
<span class="panel-value">{{ todayStats.pendingCount || '—' }}</span>
</div>
</div>
<div class="panel-footer">数据接入后将在此区域展示核心指标。</div>
</div> -->
</section>
<!-- <section class="home-grid">
<el-card shadow="hover" class="home-card" @click="navigateTo('/sms/onceSend')">
<div class="card-icon">
<el-icon :size="32" color="#1677ff">
<Message />
</el-icon>
</div>
<h3>单次发送</h3>
<p>
快速发送单条短信，支持选择接收人员和自定义短信内容，适用于临时通知和紧急消息。
</p>
</el-card>
<el-card shadow="hover" class="home-card" @click="navigateTo('/sms/loopSend')">
<div class="card-icon">
<el-icon :size="32" color="#52c41a">
<Refresh />
</el-icon>
</div>
<h3>循环发送</h3>
<p>
基于 Cron 表达式的定时发送任务，支持按计划自动发送短信，适用于定期通知和提醒。
</p>
</el-card>
<el-card
shadow="hover"
class="home-card"
@click="navigateTo('/basicManage/personManage')"
>
<div class="card-icon">
<el-icon :size="32" color="#fa8c16">
<User />
</el-icon>
</div>
<h3>人员管理</h3>
<p>
管理系统中的接收人员信息，包括姓名、电话、所属部门等基础数据，为短信发送提供数据源。
</p>
</el-card>
<el-card
shadow="hover"
class="home-card"
@click="navigateTo('/basicManage/groupManage')"
>
<div class="card-icon">
<el-icon :size="32" color="#eb2f96">
<UserFilled />
</el-icon>
</div>
<h3>分组管理</h3>
<p>创建和管理人员分组，快速选择批量接收人员，提高短信发送效率。</p>
</el-card>
</section>
<section class="home-features">
<h2 class="features-title">核心功能</h2>
<div class="features-grid">
<div class="feature-item">
<el-icon :size="24" color="#1677ff">
<Clock />
</el-icon>
<div class="feature-content">
<h4>定时发送</h4>
<p>支持 Cron 表达式配置，灵活设置发送时间</p>
</div>
</div>
<div class="feature-item">
<el-icon :size="24" color="#52c41a">
<User />
</el-icon>
<div class="feature-content">
<h4>批量选择</h4>
<p>支持按人员或分组批量选择接收人</p>
</div>
</div>
<div class="feature-item">
<el-icon :size="24" color="#fa8c16">
<Document />
</el-icon>
<div class="feature-content">
<h4>任务管理</h4>
<p>统一管理所有发送任务，支持启用/停用</p>
</div>
</div>
<div class="feature-item">
<el-icon :size="24" color="#eb2f96">
<View />
</el-icon>
<div class="feature-content">
<h4>发送记录</h4>
<p>查看详细的发送记录和状态信息</p>
</div>
</div>
</div>
</section> -->
</div>
</template>
<script setup name="Index">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Message, Refresh, User, UserFilled, Clock, Document, View } from '@element-plus/icons-vue'
const router = useRouter()
// 今日统计数据（后续可从接口获取）
const todayStats = ref({
sendCount: null,
successCount: null,
pendingCount: null,
})
// 导航到指定路由
const navigateTo = (path) => {
router.push(path)
}
</script>
<style lang="scss" scoped>
.home {
gap: 40px;
display: flex;
min-height: 100%;
flex-direction: column;
padding: 40px 48px 48px;
background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 50%, #e6f4ff 100%);
}
.home-hero {
gap: 32px;
display: grid;
align-items: stretch;
grid-template-columns: minmax(0, 2fr) minmax(320px, 1.4fr);
}
.home-hero-main {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 680px;
}
.home-tag {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #1677ff;
background: rgba(22, 119, 255, 0.1);
margin-bottom: 20px;
width: fit-content;
font-weight: 500;
}
.home-title {
font-size: 42px;
line-height: 1.3;
font-weight: 700;
color: #1f2937;
margin: 0 0 20px;
background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.home-subtitle {
margin: 0;
font-size: 16px;
line-height: 1.8;
color: #4b5563;
}
.home-hero-panel {
border-radius: 20px;
background: linear-gradient(145deg, #1677ff 0%, #4096ff 45%, #69b1ff 100%);
box-shadow: 0 20px 50px rgba(22, 119, 255, 0.3);
color: #ffffff;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
&:hover {
transform: translateY(-4px);
box-shadow: 0 24px 60px rgba(22, 119, 255, 0.4);
}
}
.panel-header {
padding: 20px 24px 12px;
font-size: 16px;
font-weight: 600;
opacity: 0.95;
}
.panel-body {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 16px 24px 12px;
gap: 12px;
}
.panel-item {
padding: 16px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
transition: background 0.3s ease;
&:hover {
background: rgba(255, 255, 255, 0.2);
}
}
.panel-label {
font-size: 13px;
opacity: 0.9;
font-weight: 500;
}
.panel-value {
font-size: 24px;
font-weight: 700;
line-height: 1.2;
}
.panel-footer {
padding: 16px 24px 20px;
font-size: 13px;
opacity: 0.85;
border-top: 1px solid rgba(255, 255, 255, 0.2);
margin-top: auto;
}
.home-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.home-card {
border-radius: 18px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid transparent;
&:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
border-color: #e6f4ff;
}
}
.home-card :deep(.el-card__body) {
padding: 24px;
}
.card-icon {
margin-bottom: 16px;
display: inline-flex;
padding: 12px;
border-radius: 12px;
background: linear-gradient(135deg, #e6f4ff 0%, #f0f7ff 100%);
}
.home-card h3 {
margin: 0 0 12px;
font-size: 20px;
font-weight: 600;
color: #111827;
}
.home-card p {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: #4b5563;
}
.home-features {
margin-top: 8px;
}
.features-title {
font-size: 24px;
font-weight: 600;
color: #1f2937;
margin: 0 0 24px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
border-radius: 12px;
background: #ffffff;
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
&:hover {
border-color: #1677ff;
box-shadow: 0 4px 12px rgba(22, 119, 255, 0.1);
transform: translateY(-2px);
}
}
.feature-content {
flex: 1;
}
.feature-content h4 {
margin: 0 0 6px;
font-size: 16px;
font-weight: 600;
color: #1f2937;
}
.feature-content p {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: #6b7280;
}
@media (max-width: 1024px) {
.home {
padding: 32px 32px 40px;
}
.home-hero {
grid-template-columns: 1fr;
}
.home-hero-panel {
order: -1;
}
.home-title {
font-size: 36px;
}
}
@media (max-width: 768px) {
.home {
padding: 24px 20px 32px;
gap: 32px;
}
.home-hero {
gap: 24px;
}
.home-title {
font-size: 28px;
}
.home-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.features-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.panel-body {
grid-template-columns: 1fr;
}
}
</style>