xgy-oa/klp-ui/src/views/index.vue

<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="dashboard-root">
    <!-- 第一行：头像+欢迎语 -->
    <div class="user-greeting-row">
      <img :src="avatar" class="user-avatar" alt="头像" />
      <div class="greeting-text">
        <div class="greeting-title">{{ greeting }}，{{ name }}</div>
        <div class="greeting-desc">愿你天黑有灯，下雨有伞</div>
      </div>
    </div>

    <!-- 全部应用 -->
    <el-row>
      <AllApplications />
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card style="height: 500px;">
          <FlowTable />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card style="height: 500px;">
          <OrderDashboard />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AllApplications from '@/views/components/AllApplications.vue';
import OrderDashboard from '@/views/components/OrderDashboard.vue';
import FlowTable from '@/views/components/FlowTable.vue';

export default {
  components: {
    AllApplications,
    OrderDashboard,
    FlowTable
  },
  data() {
    return {
      avatar: '',
      name: '',
      greeting: '',
    };
  },
  mounted() {
    this.avatar = this.$store.getters.avatar;
    this.name = this.$store.getters.name;
    this.greeting = this.getGreeting();
  },
  methods: {
    getGreeting() {
      const hour = new Date().getHours();
      if (hour < 6) return '凌晨好';
      if (hour < 9) return '早上好';
      if (hour < 12) return '上午好';
      if (hour < 14) return '中午好';
      if (hour < 18) return '下午好';
      if (hour < 21) return '晚上好';
      return '夜深了';
    },
  }
};
</script>

<style scoped>
.dashboard-root {
  min-height: 100vh;
  padding: 32px;
}

.data-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.data-card {
  padding: 24px;
  border-radius: 16px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.2s;
}

.data-card:hover {
  transform: scale(1.02);
}

.data-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.data-card-title {
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 4px;
}

.data-card-value {
  font-size: 24px;
  font-weight: 600;
}

.data-card-icon {
  font-size: 24px;
}

.icon-blue {
  color: #3b82f6;
}

.icon-green {
  color: #22c55e;
}

.icon-yellow {
  color: #eab308;
}

.icon-purple {
  color: #a855f7;
}

.data-card-chart {
  height: 48px;
  width: 100%;
}

.chart-inner {
  width: 100%;
  height: 100%;
}

.business-modules {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.business-module {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  cursor: pointer;
}

.business-module:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.business-module-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 12px;
}

.business-module-icon i {
  font-size: 20px;
}

.bg-blue {
  background: #3b82f6;
}

.bg-green {
  background: #22c55e;
}

.bg-yellow {
  background: #eab308;
}

.bg-purple {
  background: #a855f7;
}

.bg-red {
  background: #ef4444;
}

.bg-indigo {
  background: #6366f1;
}

.bg-teal {
  background: #14b8a6;
}

.business-module-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.monitor-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.monitor-resource,
.monitor-records {
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
}

.monitor-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 24px;
}

.monitor-resource-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.monitor-resource-chart {
  height: 160px;
}

.monitor-records-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.monitor-record-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  transition: background 0.2s;
}

.monitor-record-item:hover {
  background: #f9fafb;
}

.monitor-record-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.monitor-record-icon-inner {
  font-size: 14px;
}

.monitor-record-action {
  font-size: 14px;
  font-weight: 500;
}

.monitor-record-time {
  font-size: 12px;
  color: #6b7280;
}

.user-greeting-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e0e0e0;
}

.greeting-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.greeting-title {
  font-size: 28px;
  font-weight: 600;
  color: #888;
}

.greeting-desc {
  font-size: 16px;
  color: #888;
  margin-top: 4px;
}
</style>
<style>
.business-module-header,
.business-module-icon-inner,
.business-module-desc {
  display: none;
}
</style>