物料-采购件入库页面功能实现

inventory-web/src/views/dashboard/index.vue

@@ -3,22 +3,36 @@
     <el-card class="welcome-card">
       <template #header>
         <div class="card-header">
-          <span>👋 欢迎回来</span>
+          <span class="title">👋 欢迎回来，Admin</span>
+          <el-tag type="success">系统运行正常</el-tag>
         </div>
       </template>
+
       <div class="card-body">
-        <h2>欢迎使用 IRIS 库存管理系统</h2>
-        <p>请点击下方按钮进入具体业务模块：</p>
+        <h2>IRIS 库存管理系统</h2>
+        <p class="subtitle">请选择您要进行的业务操作：</p>
 
         <div class="action-buttons">
-          <el-button type="primary" size="large" @click="$router.push('/stock/inbound')">
-            <el-icon style="margin-right: 5px"><Box /></el-icon>
-            进入采购入库
+          <el-button type="primary" size="large" @click="handleNav('/inventory/buy')">
+            <el-icon style="margin-right: 5px"><ShoppingCart /></el-icon>
+            采购入库
           </el-button>
 
-          <el-button size="large" disabled>
+          <el-button type="success" size="large" @click="handleNav('/material/index')">
+            <el-icon style="margin-right: 5px"><Box /></el-icon>
+            基础物料
+          </el-button>
+
+          <el-button type="warning" size="large" @click="handleNav('/operation/borrow')">
+            <el-icon style="margin-right: 5px"><Operation /></el-icon>
+            借库申请
+          </el-button>
+        </div>
+
+        <div style="margin-top: 20px;">
+          <el-button text bg size="small" disabled>
             <el-icon style="margin-right: 5px"><TrendCharts /></el-icon>
-            库存报表 (开发中)
+            数据大屏 (开发中)
           </el-button>
         </div>
       </div>
@@ -27,35 +41,75 @@
 </template>
 
 <script setup lang="ts">
-import { Box, TrendCharts } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
+// 引入需要的图标
+import { Box, TrendCharts, ShoppingCart, Operation } from '@element-plus/icons-vue'
+
+const router = useRouter()
+
+// 统一跳转函数
+const handleNav = (path: string) => {
+  router.push(path)
+}
 </script>
 
 <style scoped>
 .dashboard-container {
-  padding: 20px;
+  /* 使用 100% 宽度和高度，利用 Flex 居中显示 */
+  height: calc(100vh - 84px); /* 减去顶部导航栏的高度，防止出现双滚动条 */
   display: flex;
   justify-content: center;
-  margin-top: 50px;
+  align-items: center;
+  background-color: #f0f2f5; /* 给背景加个淡灰色，突出卡片 */
 }
 
 .welcome-card {
-  width: 600px;
+  width: 800px; /*稍微加宽一点 */
   text-align: center;
+  border-radius: 8px; /* 圆角更好看 */
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.card-body {
+  padding: 20px 0;
 }
 
 .card-body h2 {
-  color: #303133;
+  font-size: 28px;
+  color: #409EFF; /* 使用主题蓝 */
   margin-bottom: 10px;
 }
 
-.card-body p {
-  color: #606266;
-  margin-bottom: 30px;
+.subtitle {
+  color: #909399;
+  margin-bottom: 40px;
+  font-size: 14px;
 }
 
 .action-buttons {
   display: flex;
   justify-content: center;
   gap: 20px;
+  flex-wrap: wrap; /* 防止屏幕过窄时按钮挤压 */
+}
+
+/* 给按钮加一点悬浮效果 */
+.el-button {
+  transition: all 0.3s;
+}
+.el-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 </style>