frontend_hmi_station/src/views/index.vue

<template>
  <div class="ipc-dashboard">
    <Header title="过站工控机">
      <template #right>
        <a-button @click="handleLogout">退出登录</a-button>
      </template>
    </Header>

    <div class="menu-grid">
      <a-card class="menu-card" shadow="hover" @click="handleJumpTo('/pwoManage')">
        <div class="icon-wrap">
          <i-lucide-building />
        </div>
        <div class="text">
          <div class="title">工单管理</div>
          <div class="desc">管理生产工单和进度</div>
        </div>
      </a-card>

      <a-card class="menu-card" shadow="hover" @click="handleJumpTo('/stationControl')">
        <div class="icon-wrap">
          <i-lucide-monitor />
        </div>
        <div class="text">
          <div class="title">游站控制</div>
          <div class="desc">设备状态监控和控制</div>
        </div>
      </a-card>

      <a-card class="menu-card" shadow="hover" @click="handleJumpTo('/dispatch')">
        <div class="icon-wrap">
          <i-lucide-package />
        </div>
        <div class="text">
          <div class="title">出站管理</div>
          <div class="desc">产品出站和质量检测</div>
        </div>
      </a-card>

      <a-card class="menu-card" shadow="hover" @click="handleJumpTo('/hold')">
        <div class="icon-wrap">
          <i-lucide-server />
        </div>
        <div class="text">
          <div class="title">Hold管理</div>
          <div class="desc">异常处理和Hold状态管理</div>
        </div>
      </a-card>

      <a-card class="menu-card" shadow="hover" @click="handleJumpTo('/dataAnalysis')">
        <div class="icon-wrap">
          <i-lucide-bar-chart-3 />
        </div>
        <div class="text">
          <div class="title">数据分析</div>
          <div class="desc">生产数据统计分析</div>
        </div>
      </a-card>

      <a-card class="menu-card" shadow="hover" @click="handleJumpTo('/maintenance')">
        <div class="icon-wrap">
          <i-lucide-wrench />
        </div>
        <div class="text">
          <div class="title">设备维护</div>
          <div class="desc">设备保养和维修记录</div>
        </div>
      </a-card>

      <a-card class="menu-card" shadow="hover" @click="handleJumpTo('/personnel')">
        <div class="icon-wrap">
          <i-lucide-users />
        </div>
        <div class="text">
          <div class="title">人员管理</div>
          <div class="desc">操作人员及权限管理</div>
        </div>
      </a-card>

      <a-card class="menu-card" shadow="hover" @click="handleJumpTo('/settings')">
        <div class="icon-wrap">
          <i-lucide-settings />
        </div>
        <div class="text">
          <div class="title">系统设置</div>
          <div class="desc">系统参数配置</div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { message, Modal } from 'ant-design-vue';
import { useAuthStore, useUserStore } from '@/store';
import { storeToRefs } from 'pinia';

const authStore = useAuthStore();
const userStore = useUserStore();

const { username } = storeToRefs(userStore);
const { token } = storeToRefs(authStore);
const loggedIn = ref(Boolean(token.value));

const router = useRouter();

const handleLogout = () => {
  Modal.confirm({
    title: '提示',
    content: `是否确认退出登录：${username.value}`,
    okText: '确定',
    cancelText: '取消',
    onOk: () => {
      message.success('已退出');
    },
    onCancel: () => {
      message.error('操作失败');
    }
  });
};

const handleJumpTo = (path) => {
  if (!loggedIn.value) {
    message.warning("尚未登录，请先登录");
    return;
  }
  router.push({ path });
};
</script>

<style scoped lang="scss">
.ipc-dashboard {
  background: #f5f7fa;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.menu-grid {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  padding: 8vh 6vh;
  gap: 4%;
  row-gap: 6vh;

  .menu-card {
    width: 22%;
    cursor: pointer;
    border-radius: 1vw;
    overflow: visible;

    :deep(.ant-card-body) {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 24px 16px;
      gap: 1vh;

      .icon-wrap {
        width: 5vw;
        height: 5vw;
        border-radius: 50%;
        background: linear-gradient(180deg, #0c6bd1 0%, #1c6fb8 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 3vw;
      }

      .text {
        text-align: center;

        .title {
          font-size: 1.2vw;
          font-weight: 500;
          margin-bottom: 6px;
        }

        .desc {
          color: #8b96a7;
          font-size: 0.9vw;
        }
      }
    }
  }
}

:deep(.login-dialog) {
  .ant-modal {
    width: 48vw;
    left: 26vw;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden;
  }

  .ant-modal-header {
    background: linear-gradient(135deg, #0c6bd1 0%, #1c6fb8 100%);
    border-bottom: none;
    padding: 24px 20px !important;

    .ant-modal-title {
      color: #fff;
      font-size: 20px;
      font-weight: 600;
    }

    .ant-modal-close-x {
      color: rgba(255, 255, 255, 0.7);
      font-size: 20px;

      &:hover {
        color: #fff;
      }
    }
  }

  .ant-modal-body {
    padding: 32px 28px !important;
  }

  .login-form {
    .ant-form-item {
      margin-bottom: 22px;

      .ant-form-item-label > label {
        color: #1f2937;
        font-size: 16px;
        font-weight: 500;
        padding-bottom: 10px;
      }

      .ant-input {
        font-size: 16px;
        height: 42px;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        transition: all 0.3s ease;
        padding: 0 1rem;

        &:focus,
        &:hover {
          border-color: #0c6bd1;
          box-shadow: 0 0 0 3px rgba(12, 107, 209, 0.1);
        }
      }

      .ant-input-password-icon {
        color: #bfbfbf;

        &:hover {
          color: #0c6bd1;
        }
      }
    }
  }

  .ant-modal-footer {
    padding: 20px 28px !important;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    border-radius: 0 0 16px 16px;

    .ant-btn {
      font-size: 16px;
      font-weight: 500;
      border-radius: 8px;
      padding: 10px 32px !important;
      transition: all 0.3s ease;

      &:not(.btn-primary) {
        border-color: #d9d9d9;
        color: #595959;

        &:hover {
          border-color: #0c6bd1;
          color: #0c6bd1;
          background: #f0f7ff;
        }
      }
    }

    .btn-primary {
      background: linear-gradient(135deg, #0c6bd1 0%, #1c6fb8 100%);
      border: none;
      color: #fff;

      &:hover {
        box-shadow: 0 4px 16px rgba(12, 107, 209, 0.4);
      }
    }
  }
}
</style>