frontend_hmi_station/src/views/index.vue

<template>
	<div class="ipc-dashboard">
		<Header title="MES 过站平台" showLogout />

		<div class="menu-grid">
			<a-card
				class="menu-card"
				shadow="hover"
				@click="handleJumpTo('TraceOrderManage')"
			>
				<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 lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const handleJumpTo = (name: string) => {
	router.push({ name })
}
</script>

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

.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>