huayang/admin/src/views/index.vue

<template>
  <div class="app-container home">
    <!-- 顶部欢迎区 -->
    <div class="welcome-section">
      <div class="welcome-text">
        <h2>华阳网站管理系统</h2>
      </div>
      <div class="welcome-time">
        <span class="time-text">{{ currentTime }}</span>
        <span class="date-text">{{ currentDate }}</span>
      </div>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="12" :sm="12" :md="12" :lg="12">
        <div class="stat-card stat-card--blue" @click="navigateTo(['/huayangSite/productCenter/product', '/huayangProduct/product'])">
          <div class="stat-icon">
            <i class="el-icon-goods"></i>
          </div>
          <div class="stat-info">
            <span class="stat-value">{{ stats.productCount }}</span>
            <span class="stat-label">产品总数</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="12">
        <div class="stat-card stat-card--orange" @click="navigateTo(['/huayangSite/productCenter/productInquiry', '/huayangProduct/productInquiry'])">
          <div class="stat-icon">
            <i class="el-icon-chat-dot-round"></i>
          </div>
          <div class="stat-info">
            <span class="stat-value">{{ stats.messageCount }}</span>
            <span class="stat-label">客户留言</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <!-- 最近留言 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-card class="box-card">
          <div slot="header" class="card-header">
            <span><i class="el-icon-chat-dot-round"></i> 最近留言</span>
            <el-button type="text" @click="navigateTo(['/huayangSite/productCenter/productInquiry', '/huayangProduct/productInquiry'])">查看全部</el-button>
          </div>
          <div v-if="recentMessages.length === 0" class="empty-tip">暂无留言数据</div>
          <div v-else class="recent-list">
            <div v-for="item in recentMessages" :key="item.messageId" class="recent-item">
              <div class="recent-item-header">
                <span class="recent-name">{{ item.senderName || '匿名' }}</span>
                <span class="recent-time">{{ parseTime(item.createTime, '{m}-{d} {h}:{i}') }}</span>
              </div>
              <div class="recent-content">{{ item.messageContent || '-' }}</div>
            </div>
          </div>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import { listProduct } from '@/api/huayang/product'
import { listMessage } from '@/api/huayang/message'

export default {
  name: 'Index',
  data() {
    return {
      currentTime: '',
      currentDate: '',
      timer: null,
      stats: {
        productCount: 0,
        messageCount: 0
      },
      recentMessages: []
    }
  },
  created() {
    this.updateTime()
    this.timer = setInterval(this.updateTime, 1000)
    this.loadStats()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    updateTime() {
      const now = new Date()
      this.currentTime = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.currentDate = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${weekDays[now.getDay()]}`
    },
    async loadStats() {
      try {
        const [productRes, messageRes] = await Promise.allSettled([
          listProduct({ pageNum: 1, pageSize: 1 }),
          listMessage({ pageNum: 1, pageSize: 5 })
        ])
        if (productRes.status === 'fulfilled') {
          this.stats.productCount = productRes.value.total || 0
        }
        if (messageRes.status === 'fulfilled') {
          this.stats.messageCount = messageRes.value.total || 0
          this.recentMessages = (messageRes.value.rows || []).slice(0, 5)
        }
      } catch (e) {
        // 静默处理，首页不因接口错误而崩溃
        console.warn('Dashboard stats load error:', e)
      }
    },
    navigateTo(pathOrPaths) {
      const targetPath = this.resolveFirstAvailablePath(pathOrPaths)
      this.$router.push(targetPath).catch(() => {})
    },
    resolveFirstAvailablePath(pathOrPaths) {
      const pathList = Array.isArray(pathOrPaths) ? pathOrPaths : [pathOrPaths]
      for (const candidatePath of pathList) {
        const resolved = this.$router.resolve(candidatePath)
        if (resolved && resolved.route && resolved.route.path !== '/404') {
          return candidatePath
        }
      }
      // 未找到可匹配路由时，回退到第一个候选，避免点击无响应
      return pathList[0]
    }
  }
}
</script>

<style scoped>
.home {
  padding: 16px;
}

/* 欢迎区 */
.welcome-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  border-radius: 8px;
  color: #fff;
}
.welcome-text h2 {
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: 600;
}
.welcome-text p {
  margin: 0;
  opacity: 0.85;
  font-size: 14px;
}
.welcome-time {
  text-align: right;
}
.time-text {
  display: block;
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.date-text {
  display: block;
  opacity: 0.85;
  font-size: 13px;
  margin-top: 2px;
}

/* 统计卡片 */
.stats-row {
  margin-bottom: 20px;
}
.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  color: #fff;
  margin-bottom: 12px;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.stat-card--blue {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
}
.stat-card--orange {
  background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
}
.stat-icon {
  font-size: 36px;
  margin-right: 16px;
  opacity: 0.85;
}
.stat-info {
  display: flex;
  flex-direction: column;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 4px;
}

/* 卡片 */
.box-card {
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.card-header i {
  margin-right: 6px;
}

/* 最近列表 */
.recent-list {
  max-height: 300px;
  overflow-y: auto;
}
.recent-item {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}
.recent-item:last-child {
  border-bottom: none;
}
.recent-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.recent-name {
  font-weight: 500;
  font-size: 14px;
  color: #303133;
}
.recent-time {
  font-size: 12px;
  color: #909399;
}
.recent-content {
  font-size: 13px;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-tip {
  text-align: center;
  color: #909399;
  padding: 30px 0;
  font-size: 14px;
}

@media (max-width: 768px) {
  .welcome-section {
    flex-direction: column;
    text-align: center;
  }
  .welcome-time {
    text-align: center;
    margin-top: 12px;
  }
}
</style>