refactor: 多页面UI优化、接口清理与文案调整

1. 移除质检模板页面未使用的getCheckItem接口导入 2. 给成本综合页面表格添加固定高度适配布局 3. 更新物料告警页面的表格列文案：理论值→推论值、实测值→实际值、实际偏差值→实际偏差 4. 重构重定向菜单页面的样式，优化布局与视觉效果
2026-06-13 11:14:14 +08:00
parent 325a93fd84
commit c149216ebd
4 changed files with 100 additions and 75 deletions
--- a/klp-ui/src/views/cost/comprehensive.vue
+++ b/klp-ui/src/views/cost/comprehensive.vue
@@ -27,7 +27,7 @@
          </span>
        </div>
        <el-alert :title="'已配置'+allCols.length+'个列'" type="info" :closable="false" show-icon style="margin-bottom:8px" />
-        <el-table v-loading="gridLoading" :data="gridRows" border stripe size="mini" style="width:100%" :header-cell-style="headerStyle" :key="'tbl-'+inputMode">
+        <el-table v-loading="gridLoading" height="calc(100vh - 140px)" :data="gridRows" border stripe size="mini" style="width:100%" :header-cell-style="headerStyle" :key="'tbl-'+inputMode">
          <el-table-column label="日期" width="135" fixed>
            <template slot-scope="s"><el-date-picker v-model="s.row.detailDate" type="date" value-format="yyyy-MM-dd" size="mini" style="width:124px" @change="sortGrid" /></template>
          </el-table-column>
--- a/klp-ui/src/views/mes/qc/template/index.vue
+++ b/klp-ui/src/views/mes/qc/template/index.vue
@@ -191,7 +191,7 @@

 <script>
 import { listInspectionItemTemplate, getInspectionItemTemplate, delInspectionItemTemplate, addInspectionItemTemplate, updateInspectionItemTemplate, getInfoByInspectionItem } from "@/api/mes/qc/inspectionItemTemplate";
-import { listCheckItem, getCheckItem, addCheckItem, updateCheckItem, delCheckItem } from "@/api/mes/qc/checkItem";
+import { listCheckItem, addCheckItem, updateCheckItem, delCheckItem } from "@/api/mes/qc/checkItem";
 import { addInspectionTaskWithItems } from "@/api/mes/qc/inspectionTask";
 import CheckItemTransfer from '@/components/KLPService/CheckItemSelect/index'
 import CoilSelector from "@/components/CoilSelector/index.vue";
--- a/klp-ui/src/views/redirectMenu.vue
+++ b/klp-ui/src/views/redirectMenu.vue
@@ -103,77 +103,87 @@ export default {
 </script>

 <style lang="scss" scoped>
+$c: #5F7BA0;
+
 .submenu-page {
-  padding: 24px;
-  max-width: 960px;
+  padding: 20px 24px;
+  max-width: 1200px;
  margin: 0 auto;
 }

+// ===== HEADER =====
+
 .submenu-page__header {
  margin-bottom: 20px;
-  padding-bottom: 14px;
-  border-bottom: 1px solid #e4e7ed;
+  padding: 0 0 12px 0;
+  border-bottom: 1px solid #f0f2f5;
 }

 .submenu-page__parent-title {
-  font-size: 16px;
+  font-size: 15px;
  font-weight: 600;
  color: #303133;
 }

+// ===== SECTIONS =====
+
 .submenu-page__list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
 }

 .submenu-page__empty {
  text-align: center;
-  padding: 60px 0;
+  padding: 40px 0;
  color: #909399;
-  font-size: 14px;
+  font-size: 13px;
 }

-.submenu-group {
-  background: #fff;
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
-  transition: border-color 0.2s, box-shadow 0.2s;
+// ===== GROUP =====

-  &:hover {
-    border-color: #5F7BA0;
-    box-shadow: 0 2px 8px rgba(95, 123, 160, 0.12);
-  }
+.submenu-group {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  overflow: visible;
 }

 .submenu-group__title {
  display: flex;
  align-items: center;
-  padding: 14px 16px;
+  padding: 0 0 10px 0;
+  margin-bottom: 12px;
  cursor: pointer;
-  background: linear-gradient(135deg, #fafbfc, #f5f7fa);
-  border-bottom: 1px solid #f0f2f5;
-  transition: background 0.15s, border-color 0.15s;
+  border-bottom: 1px solid #f5f6f8;
+  background: transparent;
+  transition: border-color 0.15s;
+  user-select: none;

  &:hover {
-    background: linear-gradient(135deg, #f0f2f5, #eceff3);
-    border-bottom-color: #e4e7ed;
+    border-bottom-color: $c;
+    .submenu-group__text { color: $c; }
+    .submenu-group__arrow { color: $c; transform: translateX(3px); }
  }
 }

 .submenu-group__icon {
-  font-size: 18px;
-  color: #5F7BA0;
-  margin-right: 10px;
-  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  background: rgba($c, 0.08);
  display: flex;
  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+  flex-shrink: 0;
+  font-size: 16px;
+  color: $c;
 }

 .submenu-group__text {
-  font-size: 14px;
+  font-size: 15px;
  font-weight: 600;
  color: #303133;
  flex: 1;
@@ -181,89 +191,104 @@ export default {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+  transition: color 0.15s;
 }

 .submenu-group__count {
  font-size: 12px;
-  color: #5F7BA0;
-  background: rgba(95, 123, 160, 0.08);
-  padding: 2px 8px;
+  color: #909399;
+  background: #f5f6f8;
+  padding: 2px 10px;
  border-radius: 10px;
  margin-right: 8px;
  flex-shrink: 0;
 }

 .submenu-group__arrow {
-  font-size: 12px;
+  font-size: 13px;
  color: #c0c4cc;
  flex-shrink: 0;
-  transition: color 0.15s;
-
-  .submenu-group__title:hover & {
-    color: #5F7BA0;
-  }
+  transition: transform 0.2s, color 0.2s;
 }

+// ===== TILE GRID =====
+
 .submenu-group__items {
-  padding: 6px 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 10px;
+  padding: 0;
+  background: transparent;
 }

+// ===== TILE =====
+
 .submenu-item {
  display: flex;
+  flex-direction: column;
  align-items: center;
-  padding: 10px 16px 10px 24px;
+  padding: 16px 10px 14px;
  cursor: pointer;
-  transition: background 0.15s, padding-left 0.2s;
+  background: #fff;
+  border: 1px solid #f0f2f5;
+  border-radius: 10px;
+  text-align: center;
+  transition: border-color 0.15s, box-shadow 0.15s;

  &:hover {
-    background: rgba(95, 123, 160, 0.05);
-    padding-left: 28px;
+    border-color: $c;
+    box-shadow: 0 2px 10px rgba($c, 0.1);
+    .submenu-item__arrow { opacity: 1; }
  }

-  &:not(:last-child) {
-    border-bottom: 1px solid #f7f7f7;
+  &:active {
+    background: #fafbfd;
  }
 }

+.submenu-item__folder,
+.submenu-item__doc {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+  flex-shrink: 0;
+  font-size: 18px;
+  color: $c;
+  background: rgba($c, 0.07);
+}
+
 .submenu-item__folder {
-  font-size: 14px;
  color: #e6a23c;
-  margin-right: 10px;
-  flex-shrink: 0;
-}
-
-.submenu-item__doc {
-  font-size: 14px;
-  color: #5F7BA0;
-  margin-right: 10px;
-  flex-shrink: 0;
+  background: rgba(#e6a23c, 0.08);
 }

 .submenu-item__text {
-  font-size: 13px;
-  color: #606266;
-  flex: 1;
-  min-width: 0;
+  font-size: 12px;
+  font-weight: 500;
+  color: #555;
+  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+  line-height: 1.3;
 }

 .submenu-item__arrow {
-  font-size: 12px;
+  font-size: 11px;
  color: #c0c4cc;
-  flex-shrink: 0;
-  margin-left: 4px;
-  transition: color 0.15s;
-
-  .submenu-item:hover & {
-    color: #5F7BA0;
-  }
+  margin-top: 6px;
+  opacity: 0;
+  transition: opacity 0.15s;
 }

 .submenu-item--leaf {
  .submenu-item__doc {
    color: #a8abb2;
+    background: #f5f6f8;
  }
 }
 </style>
--- a/klp-ui/src/views/wms/coil/materialWarning/index.vue
+++ b/klp-ui/src/views/wms/coil/materialWarning/index.vue
@@ -64,15 +64,15 @@
          <span v-else>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
-      <el-table-column label="理论值" align="center" prop="theoreticalVal" />
-      <el-table-column label="实测值" align="center" prop="actualVal" />
+      <el-table-column label="推论值" align="center" prop="theoreticalVal" />
+      <el-table-column label="实际值" align="center" prop="actualVal" />
      <el-table-column label="允许偏差" align="center" prop="allowDeviation">
        <template slot-scope="scope">
          <span v-if="scope.row.warningType === 'LENGTH'">{{ parseFloat((scope.row.allowDeviation * 100).toFixed(2)) }}%</span>
          <span v-else>{{ scope.row.allowDeviation }}</span>
        </template>
      </el-table-column>
-      <el-table-column label="实际偏差值" align="center" prop="deviationValue" />
+      <el-table-column label="实际偏差" align="center" prop="deviationValue" />

      <el-table-column label="告警说明" align="center" prop="warningMsg" show-overflow-tooltip />
      <el-table-column label="告警状态" align="center" prop="warningStatus">