ygtx_worklog/ygtx-ui/src/components/Dashboard/FrequentFeatures.vue

<template>
  <div class="frequent-features">
    <h2 class="section-title">高频功能</h2>
    <div class="feature-container">
      <div 
        v-for="(feature, index) in features" 
        :key="index"
        class="feature-card floating-card"
        @click="handleFeatureClick(feature)">
        <div class="feature-icon" :style="{ backgroundColor: feature.color.bgcolor }">
          <i 
            v-if="feature.icon && feature.icon.startsWith('fa ')" 
            :class="feature.icon" 
            :style="{ color: feature.color.color }">
          </i>
          <svg-icon 
            v-else 
            :icon-class="feature.icon" 
            :style="{ color: feature.color.color }">
          </svg-icon>
        </div>
        <div class="feature-name">{{ feature.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHighUse } from '@/api/system/dashboard'

export default {
  name: 'FrequentFeatures',
  data() {
    return {
      colorList: {
        blue:{color: '#165dff', bgcolor: '#e7eeff'},
        cyan:{color: '#36cfc9', bgcolor: '#ebfaf9'},
        orange:{color: '#faad14', bgcolor: '#fef7e7'},
        gray:{color: '#4e5969', bgcolor: '#edeef0'},
        red:{color: '#ff4d4f', bgcolor: '#ffeded'},
        green:{color: '#67C23A', bgcolor: '#edf9e8'},
      },
      features: []
    }
  },
  created() {
    this.fetchHighUseFeatures()
  },
  methods: {
    // 获取高频功能数据
    async fetchHighUseFeatures() {
      try {
        const response = await getHighUse()
        // 根据返回的数据结构处理 features
        this.features = response.highUse.map(item => {
          // 使用后端返回的颜色信息
          const colorKey = item.color || 'blue'
          return {
            name: item.title,
            icon: item.icon || 'fa fa-tasks',
            color: this.colorList[colorKey] || this.colorList.blue
          }
        })
      } catch (error) {
        console.error('获取高频功能数据失败:', error)
        // 如果获取失败，使用默认数据
        this.features = [
          { name: '工单管理', icon: 'fa fa-tasks', color: this.colorList.blue },
          { name: '班组管理', icon: 'fa fa-users', color: this.colorList.cyan },
          { name: '工分管理', icon: 'fa fa-star', color: this.colorList.orange },
          { name: '工时分析', icon: 'fa fa-clock', color: this.colorList.gray },
          { name: '通知中心', icon: 'fa fa-bell', color: this.colorList.red }
        ]
      }
    },
    
    // 处理功能块点击事件
    handleFeatureClick(feature) {
      this.$message.info(`点击了 ${feature.name}`)
      // 实际项目中可以跳转到对应页面
      // this.$emit('feature-click', feature)
    }
  }
}
</script>

<style scoped>
.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

/* 悬浮卡片通用样式 */
.floating-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.floating-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.feature-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 替代 el-row 的 gutter */
}

.feature-card {
  flex: 0 0 calc(20% - 16px); /* 每行 5 个（20% 宽度），减去 gap 的影响 */
  min-width: 0; /* 防止内容溢出 */
  box-sizing: border-box;
  background: white;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  display: inline-flex; /* 让背景圆形和 icon 居中 */
  align-items: center;
  justify-content: center;
  width: 48px; /* 圆形背景的宽度 */
  height: 48px; /* 圆形背景的高度 */
  border-radius: 50%; /* 圆形背景 */
  background-color: rgba(59, 130, 246, 0.1); /* 浅色背景（蓝色示例） */
  margin-bottom: 8px;
}

.feature-icon .icon {
  font-size: 20px; /* icon 大小 */
  color: #3b82f6; /* icon 颜色（蓝色示例） */
}

.feature-name {
  font-size: 14px;
}
</style>