diff --git a/src/api/dashboard/dashboard.js b/src/api/dashboard/dashboard.js
index 0fa0d23..2065e72 100644
--- a/src/api/dashboard/dashboard.js
+++ b/src/api/dashboard/dashboard.js
@@ -3,4 +3,16 @@ import { createAPI } from "@/utils/httpRequest.js";
 
 export const manualPicking = data => createAPI('/api/dashboard/manualPicking', 'POST', data)
 
+export const robotPicking = data => createAPI('/api/dashboard/robotPicking', 'POST', data)
+
+export const slittingBoard = data => createAPI('/api/dashboard/slittingBoard', 'POST', data)
+
+export const finishedProductBoard = data => createAPI('/api/dashboard/finishedProductBoard', 'POST', data)
+
+export const materialReceivingBoard = data => createAPI('/api/dashboard/materialReceivingBoard', 'POST', data)
+
+export const bufferBoard = data => createAPI('/api/dashboard/bufferBoard', 'POST', data)
+
+export const workshopFeedingBoard = data => createAPI('/api/dashboard/workshopFeedingBoard', 'POST', data)
+
 
diff --git a/src/router/index.js b/src/router/index.js
index d0f9c53..3f811ad 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,7 +21,13 @@ const globalRoutes = [
   { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
   { path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } },
   { path: '/dashboard-picking-board', component: _import('modules/dashboard/picking-board'), name: 'dashboard-picking-board', meta: { title: '人工拣选看板' } },
-  { path: '/dashboard-inventory-board', component: _import('modules/dashboard/inventory-board'), name: 'dashboard-inventory-board', meta: { title: '库存分析看板' } }
+  { path: '/dashboard-robot-picking-board', component: _import('modules/dashboard/robot-picking-board'), name: 'dashboard-robot-picking-board', meta: { title: '机械臂拣选看板' } },
+  { path: '/dashboard-slitting-board', component: _import('modules/dashboard/slitting-board'), name: 'dashboard-slitting-board', meta: { title: '分切区看板' } },
+  { path: '/dashboard-finished-product-board', component: _import('modules/dashboard/finished-product-board'), name: 'dashboard-finished-product-board', meta: { title: '成品入库出库区看板' } },
+  { path: '/dashboard-material-receiving-board', component: _import('modules/dashboard/material-receiving-board'), name: 'dashboard-material-receiving-board', meta: { title: '原材收货区看板' } },
+  { path: '/dashboard-buffer-board', component: _import('modules/dashboard/buffer-board'), name: 'dashboard-buffer-board', meta: { title: '缓存区看板' } },
+  { path: '/dashboard-workshop-feeding-board', component: _import('modules/dashboard/workshop-feeding-board'), name: 'dashboard-workshop-feeding-board', meta: { title: '车间AGV放料区看板' } },
+  { path: '/dashboard-master-board', component: _import('modules/dashboard/inventory-board'), name: 'dashboard-inventory-board', meta: { title: '库存分析看板' } }
 ]
 
 // 主入口路由(需嵌套上左右整体布局)
diff --git a/src/views/modules/dashboard/buffer-board.vue b/src/views/modules/dashboard/buffer-board.vue
new file mode 100644
index 0000000..d640c17
--- /dev/null
+++ b/src/views/modules/dashboard/buffer-board.vue
@@ -0,0 +1,617 @@
+<template>
+  <div class="picking-board-screen">
+    <!-- 装饰背景 -->
+    <div class="bg-decoration">
+      <div class="decoration-line line-1"></div>
+      <div class="decoration-line line-2"></div>
+      <div class="decoration-line line-3"></div>
+      <div class="decoration-circle circle-1"></div>
+      <div class="decoration-circle circle-2"></div>
+    </div>
+
+    <!-- 顶部标题栏 -->
+    <div class="screen-header">
+      <div class="header-decoration left"></div>
+      <div class="header-center">
+        <div class="title-glow"></div>
+        <h1 class="screen-title">缓存区实时看板</h1>
+        <div class="title-subtitle">Buffer Area Real-time Dashboard</div>
+      </div>
+      <div class="header-decoration right"></div>
+      <div class="header-time">
+        <div class="time-icon"></div>
+        <div class="time-text">{{ currentTime }}</div>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="screen-content-single">
+      <!-- 缓存区面板 -->
+      <div class="picking-panel-single">
+        <!-- 面板标题 -->
+        <div class="panel-title-bar">
+          <div class="title-left">
+            <div class="title-icon"></div>
+            <div class="title-text">
+              <span class="title-main">缓存区</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 120px;">AGV位置</th>
+                <th style="width: 150px;">托盘码</th>
+                <th style="width: 180px;">物料名称</th>
+                <th style="width: 150px;">工单号码</th>
+                <th style="width: 200px;">状态</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in bufferList" :key="idx">
+                <td class="text-center">{{ item.agvLocation }}</td>
+                <td class="text-center">{{ item.palletCode }}</td>
+                <td class="text-center">{{ item.materialName || '-' }}</td>
+                <td class="text-center">{{ item.workOrderNo || '-' }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部装饰 -->
+    <div class="screen-footer">
+      <div class="footer-line"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {bufferBoard} from '@/api/dashboard/dashboard.js'
+
+export default {
+  name: 'BufferBoard',
+
+  data() {
+    return {
+      currentTime: '',
+      timeInterval: null,
+      dataInterval: null,
+
+      // 缓存区数据
+      bufferList: [
+        {
+          agvLocation: 'HC05',
+          palletCode: 'W00015',
+          materialName: '80451239',
+          workOrderNo: '3002149',
+          status: '待送人工拣选'
+        },
+        {
+          agvLocation: 'HC06',
+          palletCode: 'W00016',
+          materialName: '80451240',
+          workOrderNo: '3002150',
+          status: '待送人工拣选'
+        },
+        {
+          agvLocation: 'HC07',
+          palletCode: 'W00017',
+          materialName: '80451241',
+          workOrderNo: '3002151',
+          status: '待送3楼车间'
+        },
+        {
+          agvLocation: 'HC08',
+          palletCode: 'W00018',
+          materialName: '80451242',
+          workOrderNo: '3002152',
+          status: '待送1楼车间'
+        },
+        {
+          agvLocation: 'HC09',
+          palletCode: 'G00013',
+          materialName: '',
+          workOrderNo: '',
+          status: '待送分切区'
+        },
+        {
+          agvLocation: 'HC10',
+          palletCode: 'G00014',
+          materialName: '',
+          workOrderNo: '',
+          status: '待送分切区'
+        },
+        {
+          agvLocation: 'HC01',
+          palletCode: 'P00011',
+          materialName: '',
+          workOrderNo: '',
+          status: '待送包装区'
+        },
+        {
+          agvLocation: 'HC02',
+          palletCode: 'P00012',
+          materialName: '',
+          workOrderNo: '',
+          status: '待送包装区'
+        },
+        {
+          agvLocation: 'HC03',
+          palletCode: 'P00013',
+          materialName: '',
+          workOrderNo: '',
+          status: '待送包装区'
+        }
+      ]
+    }
+  },
+
+  mounted() {
+    this.updateTime()
+    this.timeInterval = setInterval(() => {
+      this.updateTime()
+    }, 1000)
+    
+    // 首次加载数据
+    this.getDataList()
+    
+    // 每30秒刷新一次数据
+    this.dataInterval = setInterval(() => {
+      this.getDataList()
+    }, 30000)
+  },
+
+  beforeDestroy() {
+    if (this.timeInterval) {
+      clearInterval(this.timeInterval)
+    }
+    if (this.dataInterval) {
+      clearInterval(this.dataInterval)
+    }
+  },
+
+  methods: {
+    /**
+     * 获取数据列表
+     */
+    getDataList() {
+      bufferBoard({}).then(({data}) => {
+        if (data && data.code === 200) {
+          console.log('获取缓存区数据成功:', data.data)
+          // TODO: 处理返回的数据
+          // if (data.data) {
+          //   this.bufferList = data.data.bufferList || []
+          // }
+        }
+      }).catch(error => {
+        console.error('获取缓存区数据失败:', error)
+      })
+    },
+
+    /**
+     * 更新当前时间
+     */
+    updateTime() {
+      const now = new Date()
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      const hours = String(now.getHours()).padStart(2, '0')
+      const minutes = String(now.getMinutes()).padStart(2, '0')
+      const seconds = String(now.getSeconds()).padStart(2, '0')
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      const weekDay = weekDays[now.getDay()]
+
+      this.currentTime = `${year}-${month}-${day} ${weekDay} ${hours}:${minutes}:${seconds}`
+    },
+
+    /**
+     * 根据状态获取样式类名
+     */
+    getStatusClass(status) {
+      const statusMap = {
+        '待送人工拣选': 'status-warning',
+        '待送3楼车间': 'status-info',
+        '待送1楼车间': 'status-info',
+        '待送分切区': 'status-success',
+        '待送包装区': 'status-pending'
+      }
+      return statusMap[status] || 'status-pending'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* ===== 整体容器 ===== */
+.picking-board-screen {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
+  position: relative;
+  overflow: hidden;
+  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
+}
+
+/* ===== 装饰背景 ===== */
+.bg-decoration {
+  display: none;
+}
+
+/* ===== 顶部标题区 ===== */
+.screen-header {
+  position: relative;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 40px;
+  z-index: 10;
+  border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+  background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
+}
+
+.header-decoration {
+  display: none;
+}
+
+.header-center {
+  position: relative;
+  text-align: center;
+}
+
+.title-glow {
+  display: none;
+}
+
+.screen-title {
+  position: relative;
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0;
+  letter-spacing: 3px;
+  text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
+}
+
+.title-subtitle {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.8);
+  letter-spacing: 2px;
+  margin-top: 3px;
+  font-family: Arial, sans-serif;
+  text-transform: uppercase;
+}
+
+.header-time {
+  position: absolute;
+  right: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(23, 179, 163, 0.15);
+  padding: 12px 20px;
+  border-radius: 8px;
+  border: 1px solid rgba(23, 179, 163, 0.4);
+  backdrop-filter: blur(10px);
+}
+
+.time-icon {
+  font-size: 14px;
+  color: #17B3A3;
+}
+
+.time-text {
+  font-size: 16px;
+  color: #ffffff;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+/* ===== 主内容区（单面板） ===== */
+.screen-content-single {
+  position: relative;
+  z-index: 1;
+  padding: 20px;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.5);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.7);
+    }
+  }
+}
+
+/* ===== 单面板样式 ===== */
+.picking-panel-single {
+  width: 100%;
+  max-width: 1400px;
+  background: rgba(70, 90, 120, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(23, 179, 163, 0.5);
+  border-radius: 12px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    border-color: rgba(23, 179, 163, 0.5);
+    box-shadow:
+      0 12px 48px rgba(0, 0, 0, 0.5),
+      0 0 30px rgba(23, 179, 163, 0.2);
+    transform: translateY(-2px);
+  }
+}
+
+/* ===== 面板标题栏 ===== */
+.panel-title-bar {
+  background: linear-gradient(135deg, rgba(23, 179, 163, 0.3) 0%, rgba(23, 179, 163, 0.15) 100%);
+  border-bottom: 1px solid rgba(23, 179, 163, 0.3);
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex: 1;
+}
+
+.title-icon {
+  font-size: 20px;
+  color: #64D8CB;
+}
+
+.title-text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.title-main {
+  font-size: 22px;
+  font-weight: bold;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+}
+
+/* ===== 数据表格 ===== */
+.panel-table {
+  padding: 10px;
+  flex: 1;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.05);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.3);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.5);
+    }
+  }
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    tr {
+      background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
+    }
+
+    th {
+      padding: 15px 10px;
+      color: #fcfdfd;
+      font-size: 16px;
+      font-weight: bold;
+      text-align: center;
+      border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+      text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 8px;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      background: rgba(60, 80, 105, 0.6);
+      transition: all 0.3s ease;
+
+      &:nth-child(even) {
+        background: rgba(70, 90, 115, 0.7);
+      }
+
+      &:hover {
+        background: rgba(23, 179, 163, 0.15);
+        box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
+      }
+
+      &:last-child {
+        td:first-child {
+          border-bottom-left-radius: 8px;
+        }
+
+        td:last-child {
+          border-bottom-right-radius: 8px;
+        }
+      }
+    }
+
+    td {
+      padding: 15px 10px;
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 16px;
+      border-bottom: 1px solid rgba(23, 179, 163, 0.15);
+
+      &.text-center {
+        text-align: center;
+      }
+
+      &.text-left {
+        text-align: left;
+      }
+
+      &.text-right {
+        text-align: right;
+      }
+
+    }
+  }
+}
+
+/* ===== 状态徽章 ===== */
+.status-badge {
+  display: inline-block;
+  padding: 6px 16px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  min-width: 90px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  &.status-success {
+    background: linear-gradient(135deg, #10b981, #34d399);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+  }
+
+  &.status-warning {
+    background: linear-gradient(135deg, #f59e0b, #fbbf24);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
+  }
+
+  &.status-info {
+    background: linear-gradient(135deg, #3b82f6, #60a5fa);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
+  }
+
+  &.status-pending {
+    background: linear-gradient(135deg, #6b7280, #9ca3af);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
+  }
+}
+
+/* ===== 底部装饰 ===== */
+.screen-footer {
+  display: none;
+}
+
+/* ===== 响应式适配 ===== */
+@media screen and (max-width: 1600px) {
+  .screen-title {
+    font-size: 26px;
+    letter-spacing: 3px;
+  }
+
+  .title-main {
+    font-size: 20px;
+  }
+
+  .data-table {
+    thead th {
+      font-size: 14px;
+      padding: 12px 8px;
+    }
+
+    tbody td {
+      font-size: 14px;
+      padding: 12px 8px;
+    }
+  }
+
+  .status-badge {
+    font-size: 12px;
+    padding: 5px 12px;
+    min-width: 80px;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .screen-title {
+    font-size: 32px;
+  }
+
+  .panel-title-bar {
+    padding: 18px 24px;
+  }
+
+  .title-main {
+    font-size: 24px;
+  }
+
+  .data-table {
+    thead th {
+      font-size: 18px;
+      padding: 18px 12px;
+    }
+
+    tbody td {
+      font-size: 18px;
+      padding: 18px 12px;
+    }
+  }
+
+  .status-badge {
+    font-size: 16px;
+    padding: 8px 20px;
+    min-width: 110px;
+  }
+}
+</style>
+
diff --git a/src/views/modules/dashboard/finished-product-board.vue b/src/views/modules/dashboard/finished-product-board.vue
new file mode 100644
index 0000000..d210e15
--- /dev/null
+++ b/src/views/modules/dashboard/finished-product-board.vue
@@ -0,0 +1,666 @@
+<template>
+  <div class="picking-board-screen">
+    <!-- 装饰背景 -->
+    <div class="bg-decoration">
+      <div class="decoration-line line-1"></div>
+      <div class="decoration-line line-2"></div>
+      <div class="decoration-line line-3"></div>
+      <div class="decoration-circle circle-1"></div>
+      <div class="decoration-circle circle-2"></div>
+    </div>
+
+    <!-- 顶部标题栏 -->
+    <div class="screen-header">
+      <div class="header-decoration left"></div>
+      <div class="header-center">
+        <div class="title-glow"></div>
+        <h1 class="screen-title">成品入库出库区实时看板</h1>
+        <div class="title-subtitle">Finished Product Area Real-time Dashboard</div>
+      </div>
+      <div class="header-decoration right"></div>
+      <div class="header-time">
+        <div class="time-icon"></div>
+        <div class="time-text">{{ currentTime }}</div>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="screen-content">
+      <!-- 成品包装区面板 -->
+      <div class="picking-panel">
+        <!-- 面板标题 -->
+        <div class="panel-title-bar">
+          <div class="title-left">
+            <div class="title-icon"></div>
+            <div class="title-text">
+              <span class="title-main">成品包装区</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 60px;">No.</th>
+                <th style="width: 100px;">存放位置</th>
+                <th style="width: 110px;">托盘码</th>
+                <th style="width: 100px;">拣选位置</th>
+                <th style="width: 180px;">拣选物料名称</th>
+                <th style="width: 100px;">拣选数量</th>
+                <th style="width: 120px;">状态</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in packagingList" :key="idx">
+                <td class="text-center">{{ idx + 1 }}</td>
+                <td class="text-center">{{ item.storageLocation }}</td>
+                <td class="text-center">{{ item.palletCode }}</td>
+                <td class="text-center">{{ item.pickingLocation }}</td>
+                <td class="text-left">{{ item.materialName }}</td>
+                <td class="text-right">{{ item.quantity }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- 成品入库区面板 -->
+      <div class="picking-panel">
+        <!-- 面板标题 -->
+        <div class="panel-title-bar">
+          <div class="title-left">
+            <div class="title-icon"></div>
+            <div class="title-text">
+              <span class="title-main">成品入库区</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 80px;">No.</th>
+                <th style="width: 150px;">存放位置</th>
+                <th style="width: 150px;">托盘码</th>
+                <th style="width: 150px;">任务分类</th>
+                <th style="width: 200px;">状态</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in inboundList" :key="idx">
+                <td class="text-center">{{ idx + 1 }}</td>
+                <td class="text-center">{{ item.storageLocation }}</td>
+                <td class="text-center">{{ item.palletCode }}</td>
+                <td class="text-center">{{ item.taskType }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部装饰 -->
+    <div class="screen-footer">
+      <div class="footer-line"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {finishedProductBoard} from '@/api/dashboard/dashboard.js'
+
+export default {
+  name: 'FinishedProductBoard',
+
+  data() {
+    return {
+      currentTime: '',
+      timeInterval: null,
+      dataInterval: null,
+
+      // 成品包装区数据
+      packagingList: [
+        {
+          storageLocation: 'CP04',
+          palletCode: 'P00001',
+          pickingLocation: '2-1',
+          materialName: '80501234',
+          quantity: '1,000',
+          status: '已到达'
+        },
+        {
+          storageLocation: 'CP04',
+          palletCode: 'P00001',
+          pickingLocation: '1-2',
+          materialName: '80501235',
+          quantity: '5000',
+          status: '已到达'
+        },
+        {
+          storageLocation: 'CP04',
+          palletCode: 'P00001',
+          pickingLocation: '1-2',
+          materialName: '80501236',
+          quantity: '1000',
+          status: '已到达'
+        },
+        {
+          storageLocation: 'CP04',
+          palletCode: 'P00001',
+          pickingLocation: '1-3',
+          materialName: '80501237',
+          quantity: '1000',
+          status: '已到达'
+        },
+        {
+          storageLocation: 'CP04',
+          palletCode: 'P00001',
+          pickingLocation: '1-4',
+          materialName: '80501238',
+          quantity: '5000',
+          status: '已到达'
+        },
+        {
+          storageLocation: 'CP04',
+          palletCode: 'P00001',
+          pickingLocation: '2-2',
+          materialName: '80501239',
+          quantity: '1000',
+          status: '已到达'
+        },
+        {
+          storageLocation: 'CP04',
+          palletCode: 'P00001',
+          pickingLocation: '2-3',
+          materialName: '80501240',
+          quantity: '2000',
+          status: '已到达'
+        },
+        {
+          storageLocation: 'CP04',
+          palletCode: 'P00001',
+          pickingLocation: '2-4',
+          materialName: '80501241',
+          quantity: '123',
+          status: '已到达'
+        }
+      ],
+
+      // 成品入库区数据
+      inboundList: [
+        {
+          storageLocation: 'CP01',
+          palletCode: 'P00002',
+          taskType: '入库',
+          status: 'AGV运送中'
+        },
+        {
+          storageLocation: 'CP02',
+          palletCode: 'P00003',
+          taskType: '入库',
+          status: '已组盘'
+        },
+        {
+          storageLocation: 'CP03',
+          palletCode: 'P00004',
+          taskType: '入库',
+          status: '已组盘'
+        },
+        {
+          storageLocation: 'CP04',
+          palletCode: 'P00010',
+          taskType: '生产送货',
+          status: '已到达'
+        }
+      ]
+    }
+  },
+
+  mounted() {
+    this.updateTime()
+    this.timeInterval = setInterval(() => {
+      this.updateTime()
+    }, 1000)
+    
+    // 首次加载数据
+    this.getDataList()
+    
+    // 每30秒刷新一次数据
+    this.dataInterval = setInterval(() => {
+      this.getDataList()
+    }, 30000)
+  },
+
+  beforeDestroy() {
+    if (this.timeInterval) {
+      clearInterval(this.timeInterval)
+    }
+    if (this.dataInterval) {
+      clearInterval(this.dataInterval)
+    }
+  },
+
+  methods: {
+    /**
+     * 获取数据列表
+     */
+    getDataList() {
+      finishedProductBoard({}).then(({data}) => {
+        if (data && data.code === 200) {
+          console.log('获取成品入库出库区数据成功:', data.data)
+          // TODO: 处理返回的数据
+          // if (data.data) {
+          //   this.packagingList = data.data.packagingList || []
+          //   this.inboundList = data.data.inboundList || []
+          // }
+        }
+      }).catch(error => {
+        console.error('获取成品入库出库区数据失败:', error)
+      })
+    },
+
+    /**
+     * 更新当前时间
+     */
+    updateTime() {
+      const now = new Date()
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      const hours = String(now.getHours()).padStart(2, '0')
+      const minutes = String(now.getMinutes()).padStart(2, '0')
+      const seconds = String(now.getSeconds()).padStart(2, '0')
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      const weekDay = weekDays[now.getDay()]
+
+      this.currentTime = `${year}-${month}-${day} ${weekDay} ${hours}:${minutes}:${seconds}`
+    },
+
+    /**
+     * 根据状态获取样式类名
+     */
+    getStatusClass(status) {
+      const statusMap = {
+        '已到达': 'status-success',
+        'AGV运送中': 'status-warning',
+        '已组盘': 'status-info',
+        '等待': 'status-pending'
+      }
+      return statusMap[status] || 'status-pending'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* ===== 整体容器 ===== */
+.picking-board-screen {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
+  position: relative;
+  overflow: hidden;
+  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
+}
+
+/* ===== 装饰背景 ===== */
+.bg-decoration {
+  display: none;
+}
+
+/* ===== 顶部标题区 ===== */
+.screen-header {
+  position: relative;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 40px;
+  z-index: 10;
+  border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+  background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
+}
+
+.header-decoration {
+  display: none;
+}
+
+.header-center {
+  position: relative;
+  text-align: center;
+}
+
+.title-glow {
+  display: none;
+}
+
+.screen-title {
+  position: relative;
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0;
+  letter-spacing: 3px;
+  text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
+}
+
+.title-subtitle {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.8);
+  letter-spacing: 2px;
+  margin-top: 3px;
+  font-family: Arial, sans-serif;
+  text-transform: uppercase;
+}
+
+.header-time {
+  position: absolute;
+  right: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(23, 179, 163, 0.15);
+  padding: 12px 20px;
+  border-radius: 8px;
+  border: 1px solid rgba(23, 179, 163, 0.4);
+  backdrop-filter: blur(10px);
+}
+
+.time-icon {
+  font-size: 14px;
+  color: #17B3A3;
+}
+
+.time-text {
+  font-size: 16px;
+  color: #ffffff;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+/* ===== 主内容区 ===== */
+.screen-content {
+  position: relative;
+  z-index: 1;
+  padding: 10px 5px;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+  display: flex;
+  gap: 30px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.5);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.7);
+    }
+  }
+}
+
+/* ===== 拣选面板 ===== */
+.picking-panel {
+  margin-left: 5px;
+  flex: 1;
+  background: rgba(70, 90, 120, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(23, 179, 163, 0.5);
+  border-radius: 12px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    border-color: rgba(23, 179, 163, 0.5);
+    box-shadow:
+      0 12px 48px rgba(0, 0, 0, 0.5),
+      0 0 30px rgba(23, 179, 163, 0.2);
+    transform: translateY(-2px);
+  }
+}
+
+/* ===== 面板标题栏 ===== */
+.panel-title-bar {
+  background: linear-gradient(135deg, rgba(23, 179, 163, 0.3) 0%, rgba(23, 179, 163, 0.15) 100%);
+  border-bottom: 1px solid rgba(23, 179, 163, 0.3);
+  padding: 10px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex: 1;
+}
+
+.title-icon {
+  font-size: 16px;
+  color: #64D8CB;
+}
+
+.title-text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.title-main {
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+}
+
+/* ===== 数据表格 ===== */
+.panel-table {
+  padding: 5px 5px;
+  flex: 1;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.05);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.3);
+    border-radius: 2px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.5);
+    }
+  }
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    tr {
+      background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
+    }
+
+    th {
+      padding: 8px 2px;
+      color: #fcfdfd;
+      font-size: 10px;
+      font-weight: bold;
+      text-align: center;
+      border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+      text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 8px;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      background: rgba(60, 80, 105, 0.6);
+      transition: all 0.3s ease;
+
+      &:nth-child(even) {
+        background: rgba(70, 90, 115, 0.7);
+      }
+
+      &:hover {
+        background: rgba(23, 179, 163, 0.15);
+        box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
+      }
+
+      &:last-child {
+        td:first-child {
+          border-bottom-left-radius: 8px;
+        }
+
+        td:last-child {
+          border-bottom-right-radius: 8px;
+        }
+      }
+    }
+
+    td {
+      padding: 7px 2px;
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 12px;
+      border-bottom: 1px solid rgba(23, 179, 163, 0.15);
+
+      &.text-center {
+        text-align: center;
+      }
+
+      &.text-left {
+        text-align: left;
+      }
+
+      &.text-right {
+        text-align: right;
+      }
+
+    }
+  }
+}
+
+/* ===== 状态徽章 ===== */
+.status-badge {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: bold;
+  text-align: center;
+  min-width: 70px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  &.status-success {
+    background: linear-gradient(135deg, #10b981, #34d399);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+  }
+
+  &.status-warning {
+    background: linear-gradient(135deg, #f59e0b, #fbbf24);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
+  }
+
+  &.status-info {
+    background: linear-gradient(135deg, #3b82f6, #60a5fa);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
+  }
+
+  &.status-pending {
+    background: linear-gradient(135deg, #6b7280, #9ca3af);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
+  }
+}
+
+/* ===== 底部装饰 ===== */
+.screen-footer {
+  display: none;
+}
+
+/* ===== 响应式适配 ===== */
+@media screen and (max-width: 1600px) {
+  .screen-title {
+    font-size: 26px;
+    letter-spacing: 3px;
+  }
+
+  .title-main {
+    font-size: 18px;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .screen-title {
+    font-size: 32px;
+  }
+
+  .panel-title-bar {
+    padding: 12px 20px;
+  }
+
+  .title-main {
+    font-size: 18px;
+  }
+
+  .data-table {
+    thead th {
+      font-size: 12px;
+      padding: 9px 5px;
+    }
+
+    tbody td {
+      font-size: 14px;
+      padding: 8px 12px;
+    }
+  }
+}
+</style>
+
diff --git a/src/views/modules/dashboard/material-receiving-board.vue b/src/views/modules/dashboard/material-receiving-board.vue
new file mode 100644
index 0000000..5cd0281
--- /dev/null
+++ b/src/views/modules/dashboard/material-receiving-board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="picking-board-screen">
+    <!-- 装饰背景 -->
+    <div class="bg-decoration">
+      <div class="decoration-line line-1"></div>
+      <div class="decoration-line line-2"></div>
+      <div class="decoration-line line-3"></div>
+      <div class="decoration-circle circle-1"></div>
+      <div class="decoration-circle circle-2"></div>
+    </div>
+
+    <!-- 顶部标题栏 -->
+    <div class="screen-header">
+      <div class="header-decoration left"></div>
+      <div class="header-center">
+        <div class="title-glow"></div>
+        <h1 class="screen-title">原材收货区实时看板</h1>
+        <div class="title-subtitle">Material Receiving Area Real-time Dashboard</div>
+      </div>
+      <div class="header-decoration right"></div>
+      <div class="header-time">
+        <div class="time-icon"></div>
+        <div class="time-text">{{ currentTime }}</div>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="screen-content">
+      <!-- 原材收货区面板 -->
+      <div class="picking-panel">
+        <!-- 面板标题 -->
+        <div class="panel-title-bar">
+          <div class="title-left">
+            <div class="title-icon"></div>
+            <div class="title-text">
+              <span class="title-main">原材收货区</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 60px;">No.</th>
+                <th style="width: 120px;">到达时间</th>
+                <th style="width: 180px;">拣选物料名称</th>
+                <th style="width: 100px;">数量</th>
+                <th style="width: 100px;">库位</th>
+                <th style="width: 120px;">状态</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in receivingList" :key="idx">
+                <td class="text-center">{{ idx + 1 }}</td>
+                <td class="text-center">{{ item.arrivalTime }}</td>
+                <td class="text-left">{{ item.materialName }}</td>
+                <td class="text-right">{{ item.quantity }}</td>
+                <td class="text-center">{{ item.location }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- 原材入库区面板 -->
+      <div class="picking-panel">
+        <!-- 面板标题 -->
+        <div class="panel-title-bar">
+          <div class="title-left">
+            <div class="title-icon"></div>
+            <div class="title-text">
+              <span class="title-main">原材入库区</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 80px;">No.</th>
+                <th style="width: 150px;">存放位置</th>
+                <th style="width: 150px;">托盘码</th>
+                <th style="width: 150px;">任务分类</th>
+                <th style="width: 200px;">状态</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in inboundList" :key="idx">
+                <td class="text-center">{{ idx + 1 }}</td>
+                <td class="text-center">{{ item.storageLocation }}</td>
+                <td class="text-center">{{ item.palletCode }}</td>
+                <td class="text-center">{{ item.taskType }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部装饰 -->
+    <div class="screen-footer">
+      <div class="footer-line"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {materialReceivingBoard} from '@/api/dashboard/dashboard.js'
+
+export default {
+  name: 'MaterialReceivingBoard',
+
+  data() {
+    return {
+      currentTime: '',
+      timeInterval: null,
+      dataInterval: null,
+
+      // 原材收货区数据
+      receivingList: [
+        {
+          arrivalTime: '2025/10/15',
+          materialName: '80501234',
+          quantity: '1,000',
+          location: 'FMQ',
+          status: '待检验'
+        },
+        {
+          arrivalTime: '2025/10/15',
+          materialName: '80501235',
+          quantity: '5000',
+          location: 'FMQ',
+          status: '待检验'
+        },
+        {
+          arrivalTime: '2025/10/15',
+          materialName: '80501236',
+          quantity: '1000',
+          location: 'FMQ',
+          status: '检验OK'
+        },
+        {
+          arrivalTime: '2025/10/15',
+          materialName: '80501237',
+          quantity: '1000',
+          location: 'FMQ',
+          status: '检验OK'
+        },
+        {
+          arrivalTime: '2025/10/15',
+          materialName: '80501238',
+          quantity: '5000',
+          location: 'FMQ',
+          status: '检验NG'
+        },
+        {
+          arrivalTime: '1902/10/10',
+          materialName: '80501239',
+          quantity: '1000',
+          location: 'YCHC01',
+          status: '待入库'
+        },
+        {
+          arrivalTime: '1902/10/10',
+          materialName: '80501240',
+          quantity: '2000',
+          location: 'YCHC01',
+          status: '待入库'
+        },
+        {
+          arrivalTime: '1902/10/10',
+          materialName: '80501241',
+          quantity: '123',
+          location: 'YCHC01',
+          status: '待入库'
+        }
+      ],
+
+      // 原材入库区数据
+      inboundList: [
+        {
+          storageLocation: 'YC01',
+          palletCode: 'G00002',
+          taskType: '入库',
+          status: 'AGV运送中'
+        },
+        {
+          storageLocation: 'YC02',
+          palletCode: 'G00003',
+          taskType: '入库',
+          status: '已组盘'
+        },
+        {
+          storageLocation: 'YC03',
+          palletCode: 'G00004',
+          taskType: '入库',
+          status: '已组盘'
+        },
+        {
+          storageLocation: 'YC04',
+          palletCode: 'G00010',
+          taskType: '退料',
+          status: '已到达'
+        }
+      ]
+    }
+  },
+
+  mounted() {
+    this.updateTime()
+    this.timeInterval = setInterval(() => {
+      this.updateTime()
+    }, 1000)
+    
+    // 首次加载数据
+    this.getDataList()
+    
+    // 每30秒刷新一次数据
+    this.dataInterval = setInterval(() => {
+      this.getDataList()
+    }, 30000)
+  },
+
+  beforeDestroy() {
+    if (this.timeInterval) {
+      clearInterval(this.timeInterval)
+    }
+    if (this.dataInterval) {
+      clearInterval(this.dataInterval)
+    }
+  },
+
+  methods: {
+    /**
+     * 获取数据列表
+     */
+    getDataList() {
+      materialReceivingBoard({}).then(({data}) => {
+        if (data && data.code === 200) {
+          console.log('获取原材收货区数据成功:', data.data)
+          // TODO: 处理返回的数据
+          // if (data.data) {
+          //   this.receivingList = data.data.receivingList || []
+          //   this.inboundList = data.data.inboundList || []
+          // }
+        }
+      }).catch(error => {
+        console.error('获取原材收货区数据失败:', error)
+      })
+    },
+
+    /**
+     * 更新当前时间
+     */
+    updateTime() {
+      const now = new Date()
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      const hours = String(now.getHours()).padStart(2, '0')
+      const minutes = String(now.getMinutes()).padStart(2, '0')
+      const seconds = String(now.getSeconds()).padStart(2, '0')
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      const weekDay = weekDays[now.getDay()]
+
+      this.currentTime = `${year}-${month}-${day} ${weekDay} ${hours}:${minutes}:${seconds}`
+    },
+
+    /**
+     * 根据状态获取样式类名
+     */
+    getStatusClass(status) {
+      const statusMap = {
+        '待检验': 'status-pending',
+        '检验OK': 'status-success',
+        '检验NG': 'status-danger',
+        '待入库': 'status-info',
+        'AGV运送中': 'status-warning',
+        '已组盘': 'status-info',
+        '已到达': 'status-success'
+      }
+      return statusMap[status] || 'status-pending'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* ===== 整体容器 ===== */
+.picking-board-screen {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
+  position: relative;
+  overflow: hidden;
+  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
+}
+
+/* ===== 装饰背景 ===== */
+.bg-decoration {
+  display: none;
+}
+
+/* ===== 顶部标题区 ===== */
+.screen-header {
+  position: relative;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 40px;
+  z-index: 10;
+  border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+  background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
+}
+
+.header-decoration {
+  display: none;
+}
+
+.header-center {
+  position: relative;
+  text-align: center;
+}
+
+.title-glow {
+  display: none;
+}
+
+.screen-title {
+  position: relative;
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0;
+  letter-spacing: 3px;
+  text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
+}
+
+.title-subtitle {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.8);
+  letter-spacing: 2px;
+  margin-top: 3px;
+  font-family: Arial, sans-serif;
+  text-transform: uppercase;
+}
+
+.header-time {
+  position: absolute;
+  right: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(23, 179, 163, 0.15);
+  padding: 12px 20px;
+  border-radius: 8px;
+  border: 1px solid rgba(23, 179, 163, 0.4);
+  backdrop-filter: blur(10px);
+}
+
+.time-icon {
+  font-size: 14px;
+  color: #17B3A3;
+}
+
+.time-text {
+  font-size: 16px;
+  color: #ffffff;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+/* ===== 主内容区 ===== */
+.screen-content {
+  position: relative;
+  z-index: 1;
+  padding: 10px 5px;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+  display: flex;
+  gap: 30px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.5);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.7);
+    }
+  }
+}
+
+/* ===== 拣选面板 ===== */
+.picking-panel {
+  margin-left: 5px;
+  flex: 1;
+  background: rgba(70, 90, 120, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(23, 179, 163, 0.5);
+  border-radius: 12px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    border-color: rgba(23, 179, 163, 0.5);
+    box-shadow:
+      0 12px 48px rgba(0, 0, 0, 0.5),
+      0 0 30px rgba(23, 179, 163, 0.2);
+    transform: translateY(-2px);
+  }
+}
+
+/* ===== 面板标题栏 ===== */
+.panel-title-bar {
+  background: linear-gradient(135deg, rgba(23, 179, 163, 0.3) 0%, rgba(23, 179, 163, 0.15) 100%);
+  border-bottom: 1px solid rgba(23, 179, 163, 0.3);
+  padding: 10px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex: 1;
+}
+
+.title-icon {
+  font-size: 16px;
+  color: #64D8CB;
+}
+
+.title-text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.title-main {
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+}
+
+/* ===== 数据表格 ===== */
+.panel-table {
+  padding: 5px 5px;
+  flex: 1;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.05);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.3);
+    border-radius: 2px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.5);
+    }
+  }
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    tr {
+      background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
+    }
+
+    th {
+      padding: 8px 2px;
+      color: #fcfdfd;
+      font-size: 10px;
+      font-weight: bold;
+      text-align: center;
+      border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+      text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 8px;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      background: rgba(60, 80, 105, 0.6);
+      transition: all 0.3s ease;
+
+      &:nth-child(even) {
+        background: rgba(70, 90, 115, 0.7);
+      }
+
+      &:hover {
+        background: rgba(23, 179, 163, 0.15);
+        box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
+      }
+
+      &:last-child {
+        td:first-child {
+          border-bottom-left-radius: 8px;
+        }
+
+        td:last-child {
+          border-bottom-right-radius: 8px;
+        }
+      }
+    }
+
+    td {
+      padding: 7px 2px;
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 12px;
+      border-bottom: 1px solid rgba(23, 179, 163, 0.15);
+
+      &.text-center {
+        text-align: center;
+      }
+
+      &.text-left {
+        text-align: left;
+      }
+
+      &.text-right {
+        text-align: right;
+      }
+
+    }
+  }
+}
+
+/* ===== 状态徽章 ===== */
+.status-badge {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: bold;
+  text-align: center;
+  min-width: 70px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  &.status-success {
+    background: linear-gradient(135deg, #10b981, #34d399);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+  }
+
+  &.status-warning {
+    background: linear-gradient(135deg, #f59e0b, #fbbf24);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
+  }
+
+  &.status-info {
+    background: linear-gradient(135deg, #3b82f6, #60a5fa);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
+  }
+
+  &.status-danger {
+    background: linear-gradient(135deg, #ef4444, #f87171);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
+  }
+
+  &.status-pending {
+    background: linear-gradient(135deg, #6b7280, #9ca3af);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
+  }
+}
+
+/* ===== 底部装饰 ===== */
+.screen-footer {
+  display: none;
+}
+
+/* ===== 响应式适配 ===== */
+@media screen and (max-width: 1600px) {
+  .screen-title {
+    font-size: 26px;
+    letter-spacing: 3px;
+  }
+
+  .title-main {
+    font-size: 18px;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .screen-title {
+    font-size: 32px;
+  }
+
+  .panel-title-bar {
+    padding: 12px 20px;
+  }
+
+  .title-main {
+    font-size: 18px;
+  }
+
+  .data-table {
+    thead th {
+      font-size: 12px;
+      padding: 9px 5px;
+    }
+
+    tbody td {
+      font-size: 14px;
+      padding: 8px 12px;
+    }
+  }
+}
+</style>
+
diff --git a/src/views/modules/dashboard/robot-picking-board.vue b/src/views/modules/dashboard/robot-picking-board.vue
new file mode 100644
index 0000000..32546cf
--- /dev/null
+++ b/src/views/modules/dashboard/robot-picking-board.vue
@@ -0,0 +1,655 @@
+<template>
+  <div class="picking-board-screen">
+    <!-- 装饰背景 -->
+    <div class="bg-decoration">
+      <div class="decoration-line line-1"></div>
+      <div class="decoration-line line-2"></div>
+      <div class="decoration-line line-3"></div>
+      <div class="decoration-circle circle-1"></div>
+      <div class="decoration-circle circle-2"></div>
+    </div>
+
+    <!-- 顶部标题栏 -->
+    <div class="screen-header">
+      <div class="header-decoration left"></div>
+      <div class="header-center">
+        <div class="title-glow"></div>
+        <h1 class="screen-title">机械臂拣选实时看板</h1>
+        <div class="title-subtitle">Robot Picking Real-time Dashboard</div>
+      </div>
+      <div class="header-decoration right"></div>
+      <div class="header-time">
+        <div class="time-icon"></div>
+        <div class="time-text">{{ currentTime }}</div>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="screen-content">
+      <!-- 周转箱拣选面板 -->
+      <div class="picking-panel">
+        <!-- 面板标题 -->
+        <div class="panel-title-bar">
+          <div class="title-left">
+            <div class="title-icon"></div>
+            <div class="title-text">
+              <span class="title-main">机械臂拣选 - 周转箱</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 10px;">No.</th>
+                <th style="width: 110px;">拣选托盘码</th>
+                <th style="width: 180px;">拣选物料名称</th>
+                <th style="width: 80px;">拣选数量</th>
+                <th style="width: 130px;">状态</th>
+                <th style="width: 110px;">存放托盘码</th>
+                <th style="width: 80px;">存放位置</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in containerPickingList" :key="idx">
+                <td class="text-center">{{ idx + 1 }}</td>
+                <td class="text-center">{{ item.pickingBatchNo }}</td>
+                <td class="text-left">{{ item.pickingMaterialName }}</td>
+                <td class="text-right">{{ item.pickingQty }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+                <td class="text-center">{{ item.storageBatchNo }}</td>
+                <td class="text-center">{{ item.storageLocation }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- 原材拣选面板 -->
+      <div class="picking-panel">
+        <!-- 面板标题 -->
+        <div class="panel-title-bar">
+          <div class="title-left">
+            <div class="title-icon"></div>
+            <div class="title-text">
+              <span class="title-main">机械臂拣选 - 原材</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 10px;">No.</th>
+                <th style="width: 110px;">拣选托盘码</th>
+                <th style="width: 180px;">拣选物料名称</th>
+                <th style="width: 80px;">拣选数量</th>
+                <th style="width: 130px;">状态</th>
+                <th style="width: 110px;">存放托盘码</th>
+                <th style="width: 80px;">存放位置</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in materialPickingList" :key="idx">
+                <td class="text-center">{{ idx + 1 }}</td>
+                <td class="text-center">{{ item.pickingBatchNo }}</td>
+                <td class="text-left">{{ item.pickingMaterialName }}</td>
+                <td class="text-right">{{ item.pickingQty }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+                <td class="text-center">{{ item.storageBatchNo }}</td>
+                <td class="text-center">{{ item.storageLocation }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部装饰 -->
+    <div class="screen-footer">
+      <div class="footer-line"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {robotPicking} from '@/api/dashboard/dashboard.js'
+
+export default {
+  name: 'RobotPickingBoard',
+
+  data() {
+    return {
+      currentTime: '',
+      timeInterval: null,
+      dataInterval: null,
+
+      // 周转箱拣选数据
+      containerPickingList: [
+        {
+          pickingBatchNo: 'P00001',
+          pickingMaterialName: '80565653',
+          pickingQty: '1,000',
+          status: '分拣中',
+          storageBatchNo: 'P01100',
+          storageLocation: 'ZD01'
+        },
+        {
+          pickingBatchNo: 'P00010',
+          pickingMaterialName: '80568657',
+          pickingQty: '5,000',
+          status: '等待分拣',
+          storageBatchNo: 'P01100',
+          storageLocation: 'ZD01'
+        },
+        {
+          pickingBatchNo: 'P00012',
+          pickingMaterialName: '80505658',
+          pickingQty: '1,000',
+          status: '等待分拣',
+          storageBatchNo: 'P01100',
+          storageLocation: 'ZD01'
+        },
+        {
+          pickingBatchNo: 'P00012',
+          pickingMaterialName: '80525659',
+          pickingQty: '1,000',
+          status: '等待分拣',
+          storageBatchNo: 'P01103',
+          storageLocation: 'ZD02'
+        },
+        {
+          pickingBatchNo: 'P00033',
+          pickingMaterialName: '80542546',
+          pickingQty: '5,000',
+          status: '等待分拣',
+          storageBatchNo: 'P01103',
+          storageLocation: 'ZD02'
+        }
+      ],
+
+      // 原材拣选数据
+      materialPickingList: [
+        {
+          pickingBatchNo: 'G00001',
+          pickingMaterialName: '70000213',
+          pickingQty: '1,000',
+          status: '分拣中',
+          storageBatchNo: 'G01102',
+          storageLocation: 'ZD03'
+        },
+        {
+          pickingBatchNo: 'G00010',
+          pickingMaterialName: '70000235',
+          pickingQty: '5,000',
+          status: '等待分拣',
+          storageBatchNo: 'G01102',
+          storageLocation: 'ZD03'
+        },
+        {
+          pickingBatchNo: 'G00012',
+          pickingMaterialName: '70004562',
+          pickingQty: '1,000',
+          status: '等待分拣',
+          storageBatchNo: 'G01102',
+          storageLocation: 'ZD03'
+        },
+        {
+          pickingBatchNo: 'G00012',
+          pickingMaterialName: '70004358',
+          pickingQty: '1,000',
+          status: '等待分拣',
+          storageBatchNo: 'W11003',
+          storageLocation: 'ZD04'
+        },
+        {
+          pickingBatchNo: 'W00033',
+          pickingMaterialName: '70000220',
+          pickingQty: '5,000',
+          status: '等待分拣',
+          storageBatchNo: 'W11003',
+          storageLocation: 'ZD04'
+        }
+      ]
+    }
+  },
+
+  mounted() {
+    this.updateTime()
+    this.timeInterval = setInterval(() => {
+      this.updateTime()
+    }, 1000)
+    
+    // 首次加载数据
+    this.getDataList()
+    
+    // 每30秒刷新一次数据
+    this.dataInterval = setInterval(() => {
+      this.getDataList()
+    }, 30000)
+  },
+
+  beforeDestroy() {
+    if (this.timeInterval) {
+      clearInterval(this.timeInterval)
+    }
+    if (this.dataInterval) {
+      clearInterval(this.dataInterval)
+    }
+  },
+
+  methods: {
+    /**
+     * 获取数据列表
+     */
+    getDataList() {
+      robotPicking({}).then(({data}) => {
+        if (data && data.code === 200) {
+          console.log('获取机械臂拣选数据成功:', data.data)
+          // TODO: 处理返回的数据
+          // if (data.data) {
+          //   this.containerPickingList = data.data.containerList || []
+          //   this.materialPickingList = data.data.materialList || []
+          // }
+        }
+      }).catch(error => {
+        console.error('获取机械臂拣选数据失败:', error)
+      })
+    },
+
+    /**
+     * 更新当前时间
+     */
+    updateTime() {
+      const now = new Date()
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      const hours = String(now.getHours()).padStart(2, '0')
+      const minutes = String(now.getMinutes()).padStart(2, '0')
+      const seconds = String(now.getSeconds()).padStart(2, '0')
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      const weekDay = weekDays[now.getDay()]
+
+      this.currentTime = `${year}-${month}-${day} ${weekDay} ${hours}:${minutes}:${seconds}`
+    },
+
+    /**
+     * 根据状态获取样式类名
+     */
+    getStatusClass(status) {
+      const statusMap = {
+        '完成': 'status-success',
+        '分拣中': 'status-warning',
+        '等待分拣': 'status-pending'
+      }
+      return statusMap[status] || 'status-pending'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* ===== 整体容器 ===== */
+.picking-board-screen {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
+  position: relative;
+  overflow: hidden;
+  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
+}
+
+/* ===== 装饰背景 ===== */
+.bg-decoration {
+  display: none;
+}
+
+/* ===== 顶部标题区 ===== */
+.screen-header {
+  position: relative;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 40px;
+  z-index: 10;
+  border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+  background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
+}
+
+.header-decoration {
+  display: none;
+}
+
+.header-center {
+  position: relative;
+  text-align: center;
+}
+
+.title-glow {
+  display: none;
+}
+
+.screen-title {
+  position: relative;
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0;
+  letter-spacing: 3px;
+  text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
+}
+
+.title-subtitle {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.8);
+  letter-spacing: 2px;
+  margin-top: 3px;
+  font-family: Arial, sans-serif;
+  text-transform: uppercase;
+}
+
+.header-time {
+  position: absolute;
+  right: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(23, 179, 163, 0.15);
+  padding: 12px 20px;
+  border-radius: 8px;
+  border: 1px solid rgba(23, 179, 163, 0.4);
+  backdrop-filter: blur(10px);
+}
+
+.time-icon {
+  font-size: 14px;
+  color: #17B3A3;
+}
+
+.time-text {
+  font-size: 16px;
+  color: #ffffff;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+/* ===== 主内容区 ===== */
+.screen-content {
+  position: relative;
+  z-index: 1;
+  padding: 10px 5px;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+  display: flex;
+  gap: 30px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.5);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.7);
+    }
+  }
+}
+
+/* ===== 拣选面板 ===== */
+.picking-panel {
+  margin-left: 5px;
+  flex: 1;
+  background: rgba(70, 90, 120, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(23, 179, 163, 0.5);
+  border-radius: 12px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    border-color: rgba(23, 179, 163, 0.5);
+    box-shadow:
+      0 12px 48px rgba(0, 0, 0, 0.5),
+      0 0 30px rgba(23, 179, 163, 0.2);
+    transform: translateY(-2px);
+  }
+}
+
+/* ===== 面板标题栏 ===== */
+.panel-title-bar {
+  background: linear-gradient(135deg, rgba(23, 179, 163, 0.3) 0%, rgba(23, 179, 163, 0.15) 100%);
+  border-bottom: 1px solid rgba(23, 179, 163, 0.3);
+  padding: 10px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex: 1;
+}
+
+.title-icon {
+  font-size: 16px;
+  color: #64D8CB;
+}
+
+.title-text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.title-main {
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+}
+
+/* ===== 数据表格 ===== */
+.panel-table {
+  padding: 5px 5px;
+  flex: 1;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.05);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.3);
+    border-radius: 2px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.5);
+    }
+  }
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    tr {
+      background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
+    }
+
+    th {
+      padding: 8px 2px;
+      color: #fcfdfd;
+      font-size: 10px;
+      font-weight: bold;
+      text-align: center;
+      border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+      text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 8px;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      background: rgba(60, 80, 105, 0.6);
+      transition: all 0.3s ease;
+
+      &:nth-child(even) {
+        background: rgba(70, 90, 115, 0.7);
+      }
+
+      &:hover {
+        background: rgba(23, 179, 163, 0.15);
+        box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
+      }
+
+      &:last-child {
+        td:first-child {
+          border-bottom-left-radius: 8px;
+        }
+
+        td:last-child {
+          border-bottom-right-radius: 8px;
+        }
+      }
+    }
+
+    td {
+      padding: 7px 2px;
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 12px;
+      border-bottom: 1px solid rgba(23, 179, 163, 0.15);
+
+      &.text-center {
+        text-align: center;
+      }
+
+      &.text-left {
+        text-align: left;
+      }
+
+      &.text-right {
+        text-align: right;
+      }
+
+    }
+  }
+}
+
+/* ===== 状态徽章 ===== */
+.status-badge {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: bold;
+  text-align: center;
+  min-width: 60px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  &.status-success {
+    background: linear-gradient(135deg, #10b981, #34d399);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+  }
+
+  &.status-warning {
+    background: linear-gradient(135deg, #f59e0b, #fbbf24);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
+  }
+
+  &.status-pending {
+    background: linear-gradient(135deg, #6b7280, #9ca3af);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
+  }
+}
+
+/* ===== 底部装饰 ===== */
+.screen-footer {
+  display: none;
+}
+
+/* ===== 响应式适配 ===== */
+@media screen and (max-width: 1600px) {
+  .screen-title {
+    font-size: 26px;
+    letter-spacing: 3px;
+  }
+
+  .title-main {
+    font-size: 18px;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .screen-title {
+    font-size: 32px;
+  }
+
+  .panel-title-bar {
+    padding: 12px 20px;
+  }
+
+  .title-main {
+    font-size: 18px;
+  }
+
+  .data-table {
+    thead th {
+      font-size: 12px;
+      padding: 9px 5px;
+    }
+
+    tbody td {
+      font-size: 14px;
+      padding: 8px 12px;
+    }
+  }
+}
+</style>
+
diff --git a/src/views/modules/dashboard/slitting-board.vue b/src/views/modules/dashboard/slitting-board.vue
new file mode 100644
index 0000000..1fcea52
--- /dev/null
+++ b/src/views/modules/dashboard/slitting-board.vue
@@ -0,0 +1,645 @@
+<template>
+  <div class="picking-board-screen">
+    <!-- 装饰背景 -->
+    <div class="bg-decoration">
+      <div class="decoration-line line-1"></div>
+      <div class="decoration-line line-2"></div>
+      <div class="decoration-line line-3"></div>
+      <div class="decoration-circle circle-1"></div>
+      <div class="decoration-circle circle-2"></div>
+    </div>
+
+    <!-- 顶部标题栏 -->
+    <div class="screen-header">
+      <div class="header-decoration left"></div>
+      <div class="header-center">
+        <div class="title-glow"></div>
+        <h1 class="screen-title">分切区实时看板</h1>
+        <div class="title-subtitle">Slitting Area Real-time Dashboard</div>
+      </div>
+      <div class="header-decoration right"></div>
+      <div class="header-time">
+        <div class="time-icon"></div>
+        <div class="time-text">{{ currentTime }}</div>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="screen-content">
+      <!-- 助力臂区面板 -->
+      <div class="picking-panel">
+        <!-- 面板标题 -->
+        <div class="panel-title-bar">
+          <div class="title-left">
+            <div class="title-icon"></div>
+            <div class="title-text">
+              <span class="title-main">助力臂区</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 60px;">No.</th>
+                <th style="width: 100px;">存放位置</th>
+                <th style="width: 110px;">托盘码</th>
+                <th style="width: 100px;">拣选位置</th>
+                <th style="width: 180px;">拣选物料名称</th>
+                <th style="width: 100px;">拣选数量</th>
+                <th style="width: 120px;">状态</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in assistArmList" :key="idx">
+                <td class="text-center">{{ idx + 1 }}</td>
+                <td class="text-center">{{ item.storageLocation }}</td>
+                <td class="text-center">{{ item.palletCode }}</td>
+                <td class="text-center">{{ item.pickingLocation }}</td>
+                <td class="text-left">{{ item.materialName }}</td>
+                <td class="text-right">{{ item.quantity }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- 分切入库区面板 -->
+      <div class="picking-panel">
+        <!-- 面板标题 -->
+        <div class="panel-title-bar">
+          <div class="title-left">
+            <div class="title-icon"></div>
+            <div class="title-text">
+              <span class="title-main">分切入库区</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 80px;">No.</th>
+                <th style="width: 150px;">存放位置</th>
+                <th style="width: 150px;">托盘码</th>
+                <th style="width: 150px;">任务分类</th>
+                <th style="width: 200px;">状态</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in slittingInboundList" :key="idx">
+                <td class="text-center">{{ idx + 1 }}</td>
+                <td class="text-center">{{ item.storageLocation }}</td>
+                <td class="text-center">{{ item.palletCode }}</td>
+                <td class="text-center">{{ item.taskType }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部装饰 -->
+    <div class="screen-footer">
+      <div class="footer-line"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {slittingBoard} from '@/api/dashboard/dashboard.js'
+
+export default {
+  name: 'SlittingBoard',
+
+  data() {
+    return {
+      currentTime: '',
+      timeInterval: null,
+      dataInterval: null,
+
+      // 助力臂区数据
+      assistArmList: [
+        {
+          storageLocation: 'FQ01',
+          palletCode: 'G00100',
+          pickingLocation: '1',
+          materialName: '70000213',
+          quantity: '400',
+          status: '已到达'
+        },
+        {
+          storageLocation: 'FQ01',
+          palletCode: 'G00100',
+          pickingLocation: '2',
+          materialName: '70000235',
+          quantity: '203',
+          status: '已到达'
+        },
+        {
+          storageLocation: 'FQ01',
+          palletCode: 'G00100',
+          pickingLocation: '3',
+          materialName: '70000237',
+          quantity: '500',
+          status: '已到达'
+        },
+        {
+          storageLocation: 'FQ01',
+          palletCode: 'G00100',
+          pickingLocation: '4',
+          materialName: '70002546',
+          quantity: '500',
+          status: '已到达'
+        },
+        {
+          storageLocation: 'FQ02',
+          palletCode: 'G00200',
+          pickingLocation: '1',
+          materialName: '70000033',
+          quantity: '500',
+          status: '已到达'
+        },
+        {
+          storageLocation: 'FQ02',
+          palletCode: 'G00200',
+          pickingLocation: '2',
+          materialName: '70000212',
+          quantity: '2000',
+          status: '已到达'
+        }
+      ],
+
+      // 分切入库区数据
+      slittingInboundList: [
+        {
+          storageLocation: 'FQ05',
+          palletCode: 'W000001',
+          taskType: '入库',
+          status: 'AGV取货中'
+        },
+        {
+          storageLocation: 'FQ06',
+          palletCode: 'W000002',
+          taskType: '移库',
+          status: 'AGV运送中'
+        },
+        {
+          storageLocation: 'FQ07',
+          palletCode: 'G000001',
+          taskType: '分切退料',
+          status: '已组盘'
+        }
+      ]
+    }
+  },
+
+  mounted() {
+    this.updateTime()
+    this.timeInterval = setInterval(() => {
+      this.updateTime()
+    }, 1000)
+    
+    // 首次加载数据
+    this.getDataList()
+    
+    // 每30秒刷新一次数据
+    this.dataInterval = setInterval(() => {
+      this.getDataList()
+    }, 30000)
+  },
+
+  beforeDestroy() {
+    if (this.timeInterval) {
+      clearInterval(this.timeInterval)
+    }
+    if (this.dataInterval) {
+      clearInterval(this.dataInterval)
+    }
+  },
+
+  methods: {
+    /**
+     * 获取数据列表
+     */
+    getDataList() {
+      slittingBoard({}).then(({data}) => {
+        if (data && data.code === 200) {
+          console.log('获取分切区数据成功:', data.data)
+          // TODO: 处理返回的数据
+          // if (data.data) {
+          //   this.assistArmList = data.data.assistArmList || []
+          //   this.slittingInboundList = data.data.slittingInboundList || []
+          // }
+        }
+      }).catch(error => {
+        console.error('获取分切区数据失败:', error)
+      })
+    },
+
+    /**
+     * 更新当前时间
+     */
+    updateTime() {
+      const now = new Date()
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      const hours = String(now.getHours()).padStart(2, '0')
+      const minutes = String(now.getMinutes()).padStart(2, '0')
+      const seconds = String(now.getSeconds()).padStart(2, '0')
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      const weekDay = weekDays[now.getDay()]
+
+      this.currentTime = `${year}-${month}-${day} ${weekDay} ${hours}:${minutes}:${seconds}`
+    },
+
+    /**
+     * 根据状态获取样式类名
+     */
+    getStatusClass(status) {
+      const statusMap = {
+        '已到达': 'status-success',
+        'AGV取货中': 'status-warning',
+        'AGV运送中': 'status-warning',
+        '已组盘': 'status-info',
+        '等待': 'status-pending'
+      }
+      return statusMap[status] || 'status-pending'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* ===== 整体容器 ===== */
+.picking-board-screen {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
+  position: relative;
+  overflow: hidden;
+  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
+}
+
+/* ===== 装饰背景 ===== */
+.bg-decoration {
+  display: none;
+}
+
+/* ===== 顶部标题区 ===== */
+.screen-header {
+  position: relative;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 40px;
+  z-index: 10;
+  border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+  background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
+}
+
+.header-decoration {
+  display: none;
+}
+
+.header-center {
+  position: relative;
+  text-align: center;
+}
+
+.title-glow {
+  display: none;
+}
+
+.screen-title {
+  position: relative;
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0;
+  letter-spacing: 3px;
+  text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
+}
+
+.title-subtitle {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.8);
+  letter-spacing: 2px;
+  margin-top: 3px;
+  font-family: Arial, sans-serif;
+  text-transform: uppercase;
+}
+
+.header-time {
+  position: absolute;
+  right: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(23, 179, 163, 0.15);
+  padding: 12px 20px;
+  border-radius: 8px;
+  border: 1px solid rgba(23, 179, 163, 0.4);
+  backdrop-filter: blur(10px);
+}
+
+.time-icon {
+  font-size: 14px;
+  color: #17B3A3;
+}
+
+.time-text {
+  font-size: 16px;
+  color: #ffffff;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+/* ===== 主内容区 ===== */
+.screen-content {
+  position: relative;
+  z-index: 1;
+  padding: 10px 5px;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+  display: flex;
+  gap: 30px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.5);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.7);
+    }
+  }
+}
+
+/* ===== 拣选面板 ===== */
+.picking-panel {
+  margin-left: 5px;
+  flex: 1;
+  background: rgba(70, 90, 120, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(23, 179, 163, 0.5);
+  border-radius: 12px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    border-color: rgba(23, 179, 163, 0.5);
+    box-shadow:
+      0 12px 48px rgba(0, 0, 0, 0.5),
+      0 0 30px rgba(23, 179, 163, 0.2);
+    transform: translateY(-2px);
+  }
+}
+
+/* ===== 面板标题栏 ===== */
+.panel-title-bar {
+  background: linear-gradient(135deg, rgba(23, 179, 163, 0.3) 0%, rgba(23, 179, 163, 0.15) 100%);
+  border-bottom: 1px solid rgba(23, 179, 163, 0.3);
+  padding: 10px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex: 1;
+}
+
+.title-icon {
+  font-size: 16px;
+  color: #64D8CB;
+}
+
+.title-text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.title-main {
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+}
+
+/* ===== 数据表格 ===== */
+.panel-table {
+  padding: 5px 5px;
+  flex: 1;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.05);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.3);
+    border-radius: 2px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.5);
+    }
+  }
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    tr {
+      background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
+    }
+
+    th {
+      padding: 8px 2px;
+      color: #fcfdfd;
+      font-size: 10px;
+      font-weight: bold;
+      text-align: center;
+      border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+      text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 8px;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      background: rgba(60, 80, 105, 0.6);
+      transition: all 0.3s ease;
+
+      &:nth-child(even) {
+        background: rgba(70, 90, 115, 0.7);
+      }
+
+      &:hover {
+        background: rgba(23, 179, 163, 0.15);
+        box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
+      }
+
+      &:last-child {
+        td:first-child {
+          border-bottom-left-radius: 8px;
+        }
+
+        td:last-child {
+          border-bottom-right-radius: 8px;
+        }
+      }
+    }
+
+    td {
+      padding: 7px 2px;
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 12px;
+      border-bottom: 1px solid rgba(23, 179, 163, 0.15);
+
+      &.text-center {
+        text-align: center;
+      }
+
+      &.text-left {
+        text-align: left;
+      }
+
+      &.text-right {
+        text-align: right;
+      }
+
+    }
+  }
+}
+
+/* ===== 状态徽章 ===== */
+.status-badge {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: bold;
+  text-align: center;
+  min-width: 70px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  &.status-success {
+    background: linear-gradient(135deg, #10b981, #34d399);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+  }
+
+  &.status-warning {
+    background: linear-gradient(135deg, #f59e0b, #fbbf24);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
+  }
+
+  &.status-info {
+    background: linear-gradient(135deg, #3b82f6, #60a5fa);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
+  }
+
+  &.status-pending {
+    background: linear-gradient(135deg, #6b7280, #9ca3af);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
+  }
+}
+
+/* ===== 底部装饰 ===== */
+.screen-footer {
+  display: none;
+}
+
+/* ===== 响应式适配 ===== */
+@media screen and (max-width: 1600px) {
+  .screen-title {
+    font-size: 26px;
+    letter-spacing: 3px;
+  }
+
+  .title-main {
+    font-size: 18px;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .screen-title {
+    font-size: 32px;
+  }
+
+  .panel-title-bar {
+    padding: 12px 20px;
+  }
+
+  .title-main {
+    font-size: 18px;
+  }
+
+  .data-table {
+    thead th {
+      font-size: 12px;
+      padding: 9px 5px;
+    }
+
+    tbody td {
+      font-size: 14px;
+      padding: 8px 12px;
+    }
+  }
+}
+</style>
+
diff --git a/src/views/modules/dashboard/workshop-feeding-board.vue b/src/views/modules/dashboard/workshop-feeding-board.vue
new file mode 100644
index 0000000..a7bcb2f
--- /dev/null
+++ b/src/views/modules/dashboard/workshop-feeding-board.vue
@@ -0,0 +1,582 @@
+<template>
+  <div class="picking-board-screen">
+    <!-- 装饰背景 -->
+    <div class="bg-decoration">
+      <div class="decoration-line line-1"></div>
+      <div class="decoration-line line-2"></div>
+      <div class="decoration-line line-3"></div>
+      <div class="decoration-circle circle-1"></div>
+      <div class="decoration-circle circle-2"></div>
+    </div>
+
+    <!-- 顶部标题栏 -->
+    <div class="screen-header">
+      <div class="header-decoration left"></div>
+      <div class="header-center">
+        <div class="title-glow"></div>
+        <h1 class="screen-title">车间AGV放料区实时看板</h1>
+        <div class="title-subtitle">Workshop AGV Feeding Area Real-time Dashboard</div>
+      </div>
+      <div class="header-decoration right"></div>
+      <div class="header-time">
+        <div class="time-icon"></div>
+        <div class="time-text">{{ currentTime }}</div>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="screen-content-single">
+      <!-- 车间AGV放料区面板 -->
+      <div class="picking-panel-single">
+        <!-- 面板标题 -->
+        <div class="panel-title-bar">
+          <div class="title-left">
+            <div class="title-icon"></div>
+            <div class="title-text">
+              <span class="title-main">车间AGV放料区</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 80px;">NO.</th>
+                <th style="width: 120px;">AGV位置</th>
+                <th style="width: 150px;">托盘码</th>
+                <th style="width: 180px;">物料名称</th>
+                <th style="width: 150px;">工单号码</th>
+                <th style="width: 150px;">生产区域</th>
+                <th style="width: 180px;">状态</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in feedingList" :key="idx">
+                <td class="text-center">{{ idx + 1 }}</td>
+                <td class="text-center">{{ item.agvLocation }}</td>
+                <td class="text-center">{{ item.palletCode }}</td>
+                <td class="text-center">{{ item.materialName }}</td>
+                <td class="text-center">{{ item.workOrderNo }}</td>
+                <td class="text-center">{{ item.productionArea }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部装饰 -->
+    <div class="screen-footer">
+      <div class="footer-line"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {workshopFeedingBoard} from '@/api/dashboard/dashboard.js'
+
+export default {
+  name: 'WorkshopFeedingBoard',
+
+  data() {
+    return {
+      currentTime: '',
+      timeInterval: null,
+      dataInterval: null,
+
+      // 车间AGV放料区数据
+      feedingList: [
+        {
+          agvLocation: 'SC001',
+          palletCode: 'W00015',
+          materialName: '80451239',
+          workOrderNo: '3002149',
+          productionArea: 'Diecut',
+          status: '已送达'
+        },
+        {
+          agvLocation: 'SC002',
+          palletCode: 'W00016',
+          materialName: '80451240',
+          workOrderNo: '3002150',
+          productionArea: 'Diecut1',
+          status: '已送达'
+        },
+        {
+          agvLocation: 'SC003',
+          palletCode: 'W00017',
+          materialName: '80451241',
+          workOrderNo: '3002151',
+          productionArea: 'Screen',
+          status: '已送达'
+        },
+        {
+          agvLocation: 'SC004',
+          palletCode: 'W00018',
+          materialName: '80451242',
+          workOrderNo: '3002152',
+          productionArea: 'Screen',
+          status: '已送达'
+        }
+      ]
+    }
+  },
+
+  mounted() {
+    this.updateTime()
+    this.timeInterval = setInterval(() => {
+      this.updateTime()
+    }, 1000)
+    
+    // 首次加载数据
+    this.getDataList()
+    
+    // 每30秒刷新一次数据
+    this.dataInterval = setInterval(() => {
+      this.getDataList()
+    }, 30000)
+  },
+
+  beforeDestroy() {
+    if (this.timeInterval) {
+      clearInterval(this.timeInterval)
+    }
+    if (this.dataInterval) {
+      clearInterval(this.dataInterval)
+    }
+  },
+
+  methods: {
+    /**
+     * 获取数据列表
+     */
+    getDataList() {
+      workshopFeedingBoard({}).then(({data}) => {
+        if (data && data.code === 200) {
+          console.log('获取车间AGV放料区数据成功:', data.data)
+          // TODO: 处理返回的数据
+          // if (data.data) {
+          //   this.feedingList = data.data.feedingList || []
+          // }
+        }
+      }).catch(error => {
+        console.error('获取车间AGV放料区数据失败:', error)
+      })
+    },
+
+    /**
+     * 更新当前时间
+     */
+    updateTime() {
+      const now = new Date()
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      const hours = String(now.getHours()).padStart(2, '0')
+      const minutes = String(now.getMinutes()).padStart(2, '0')
+      const seconds = String(now.getSeconds()).padStart(2, '0')
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      const weekDay = weekDays[now.getDay()]
+
+      this.currentTime = `${year}-${month}-${day} ${weekDay} ${hours}:${minutes}:${seconds}`
+    },
+
+    /**
+     * 根据状态获取样式类名
+     */
+    getStatusClass(status) {
+      const statusMap = {
+        '已送达': 'status-success',
+        'AGV运送中': 'status-warning',
+        '等待取货': 'status-pending'
+      }
+      return statusMap[status] || 'status-pending'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* ===== 整体容器 ===== */
+.picking-board-screen {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
+  position: relative;
+  overflow: hidden;
+  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
+}
+
+/* ===== 装饰背景 ===== */
+.bg-decoration {
+  display: none;
+}
+
+/* ===== 顶部标题区 ===== */
+.screen-header {
+  position: relative;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 40px;
+  z-index: 10;
+  border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+  background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
+}
+
+.header-decoration {
+  display: none;
+}
+
+.header-center {
+  position: relative;
+  text-align: center;
+}
+
+.title-glow {
+  display: none;
+}
+
+.screen-title {
+  position: relative;
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0;
+  letter-spacing: 3px;
+  text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
+}
+
+.title-subtitle {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.8);
+  letter-spacing: 2px;
+  margin-top: 3px;
+  font-family: Arial, sans-serif;
+  text-transform: uppercase;
+}
+
+.header-time {
+  position: absolute;
+  right: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(23, 179, 163, 0.15);
+  padding: 12px 20px;
+  border-radius: 8px;
+  border: 1px solid rgba(23, 179, 163, 0.4);
+  backdrop-filter: blur(10px);
+}
+
+.time-icon {
+  font-size: 14px;
+  color: #17B3A3;
+}
+
+.time-text {
+  font-size: 16px;
+  color: #ffffff;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+/* ===== 主内容区（单面板） ===== */
+.screen-content-single {
+  position: relative;
+  z-index: 1;
+  padding: 20px;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.5);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.7);
+    }
+  }
+}
+
+/* ===== 单面板样式 ===== */
+.picking-panel-single {
+  width: 100%;
+  max-width: 1600px;
+  background: rgba(70, 90, 120, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(23, 179, 163, 0.5);
+  border-radius: 12px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    border-color: rgba(23, 179, 163, 0.5);
+    box-shadow:
+      0 12px 48px rgba(0, 0, 0, 0.5),
+      0 0 30px rgba(23, 179, 163, 0.2);
+    transform: translateY(-2px);
+  }
+}
+
+/* ===== 面板标题栏 ===== */
+.panel-title-bar {
+  background: linear-gradient(135deg, rgba(23, 179, 163, 0.3) 0%, rgba(23, 179, 163, 0.15) 100%);
+  border-bottom: 1px solid rgba(23, 179, 163, 0.3);
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex: 1;
+}
+
+.title-icon {
+  font-size: 20px;
+  color: #64D8CB;
+}
+
+.title-text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.title-main {
+  font-size: 22px;
+  font-weight: bold;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+}
+
+/* ===== 数据表格 ===== */
+.panel-table {
+  padding: 10px;
+  flex: 1;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.05);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.3);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.5);
+    }
+  }
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    tr {
+      background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
+    }
+
+    th {
+      padding: 15px 10px;
+      color: #fcfdfd;
+      font-size: 16px;
+      font-weight: bold;
+      text-align: center;
+      border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+      text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 8px;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      background: rgba(60, 80, 105, 0.6);
+      transition: all 0.3s ease;
+
+      &:nth-child(even) {
+        background: rgba(70, 90, 115, 0.7);
+      }
+
+      &:hover {
+        background: rgba(23, 179, 163, 0.15);
+        box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
+      }
+
+      &:last-child {
+        td:first-child {
+          border-bottom-left-radius: 8px;
+        }
+
+        td:last-child {
+          border-bottom-right-radius: 8px;
+        }
+      }
+    }
+
+    td {
+      padding: 15px 10px;
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 16px;
+      border-bottom: 1px solid rgba(23, 179, 163, 0.15);
+
+      &.text-center {
+        text-align: center;
+      }
+
+      &.text-left {
+        text-align: left;
+      }
+
+      &.text-right {
+        text-align: right;
+      }
+
+    }
+  }
+}
+
+/* ===== 状态徽章 ===== */
+.status-badge {
+  display: inline-block;
+  padding: 6px 16px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  min-width: 90px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  &.status-success {
+    background: linear-gradient(135deg, #10b981, #34d399);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+  }
+
+  &.status-warning {
+    background: linear-gradient(135deg, #f59e0b, #fbbf24);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
+  }
+
+  &.status-pending {
+    background: linear-gradient(135deg, #6b7280, #9ca3af);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
+  }
+}
+
+/* ===== 底部装饰 ===== */
+.screen-footer {
+  display: none;
+}
+
+/* ===== 响应式适配 ===== */
+@media screen and (max-width: 1600px) {
+  .screen-title {
+    font-size: 26px;
+    letter-spacing: 3px;
+  }
+
+  .title-main {
+    font-size: 20px;
+  }
+
+  .data-table {
+    thead th {
+      font-size: 14px;
+      padding: 12px 8px;
+    }
+
+    tbody td {
+      font-size: 14px;
+      padding: 12px 8px;
+    }
+  }
+
+  .status-badge {
+    font-size: 12px;
+    padding: 5px 12px;
+    min-width: 80px;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .screen-title {
+    font-size: 32px;
+  }
+
+  .panel-title-bar {
+    padding: 18px 24px;
+  }
+
+  .title-main {
+    font-size: 24px;
+  }
+
+  .data-table {
+    thead th {
+      font-size: 18px;
+      padding: 18px 12px;
+    }
+
+    tbody td {
+      font-size: 18px;
+      padding: 18px 12px;
+    }
+  }
+
+  .status-badge {
+    font-size: 16px;
+    padding: 8px 20px;
+    min-width: 110px;
+  }
+}
+</style>
+