From 16577bbc2c425bf427fea5e6d7280e81aa31ca55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=96=87=E6=98=8A?=
 <15984991+wwh2328692301@user.noreply.gitee.com>
Date: Thu, 14 May 2026 11:28:21 +0800
Subject: [PATCH] =?UTF-8?q?refactor(wms/processSpec):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=B7=A5=E8=89=BA=E8=A7=84=E6=A0=BC=E9=A1=B5=E9=9D=A2=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=B8=8E=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.  调整页面布局为顶部筛选栏+上下分栏结构，替换原左右分栏布局
2.  优化筛选区样式与排版，调整表格列宽与操作栏固定
3.  重构版本列表为网格布局，优化版本卡片交互与样式
4.  更新空状态提示文案与整体视觉风格
5.  新增gitignore规则，忽略个人脚本、表格文件与缓存文件
---
 .gitignore                                 |  14 +
 klp-ui/src/views/wms/processSpec/index.vue | 399 ++++++++++++---------
 2 files changed, 251 insertions(+), 162 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2cb969ab..3d53fbc8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -44,3 +44,17 @@ nbdist/
 !*/build/*.java
 !*/build/*.html
 !*/build/*.xml
+
+######################################################################
+# Personal Scripts & Tables (not for commit)
+*.xlsx
+*.xls
+*.csv
+*.sh
+*.bat
+*.ps1
+/scripts/personal/
+/tables/
+*.local.*
+*.py
+*.pyc
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/processSpec/index.vue b/klp-ui/src/views/wms/processSpec/index.vue
index 0b4be7d2..14206266 100644
--- a/klp-ui/src/views/wms/processSpec/index.vue
+++ b/klp-ui/src/views/wms/processSpec/index.vue
@@ -1,41 +1,47 @@
 <template>
   <div class="spec-page" v-loading="pageLoading">
-    <!-- 主体：左规程列表 + 右版本面板 -->
-    <div class="master-detail">
-      <!-- 左：规程列表 -->
-      <div class="master-panel">
-        <!-- 筛选区 -->
-        <div class="filter-area">
-          <div class="filter-row">
-            <span class="filter-label">规程类型</span>
-            <dict-select
-              class="filter-select"
-              renderType="radio"
-              v-model="queryParams.specType"
-              dict-type="wms_process_spec_type"
-              :kisv="false"
-              :editable="true"
-              @change="loadSpecs"
-            />
-          </div>
-          <div class="filter-row">
-            <span class="filter-label">产线</span>
-            <dict-select
-              class="filter-select"
-              renderType="radio"
-              v-model="queryParams.lineId"
-              dict-type="wms_process_spec_line"
-              :kisv="false"
-              :editable="true"
-              @change="loadSpecs"
-            />
-          </div>
+    <!-- 顶部筛选区 -->
+    <div class="top-filter-bar">
+      <div class="filter-rows">
+        <!-- 第一行：规程类型 -->
+        <div class="filter-row">
+          <span class="filter-label filter-label-type">规程类型</span>
+          <dict-select
+            class="filter-select"
+            renderType="radio"
+            v-model="queryParams.specType"
+            dict-type="wms_process_spec_type"
+            :kisv="false"
+            :editable="true"
+            @change="loadSpecs"
+          />
         </div>
-        <!-- 列表头 -->
-        <div class="panel-hd">
-          <span class="panel-title">规程列表</span>
-          <span class="total-badge">{{ total }} 条</span>
-          <el-button type="primary" size="mini" icon="el-icon-plus" style="margin-left:auto" @click="openSpecDialog()">新建</el-button>
+        <!-- 第二行：产线 -->
+        <div class="filter-row">
+          <span class="filter-label filter-label-line">产 线</span>
+          <dict-select
+            class="filter-select"
+            renderType="radio"
+            v-model="queryParams.lineId"
+            dict-type="wms_process_spec_line"
+            :kisv="false"
+            :editable="true"
+            @change="loadSpecs"
+          />
+        </div>
+      </div>
+      <el-button type="primary" size="mini" icon="el-icon-plus" class="new-spec-btn" @click="openSpecDialog()">新建规程</el-button>
+    </div>
+
+    <!-- 主体：上规程列表 + 下版本面板 -->
+    <div class="main-content">
+      <!-- 上：规程列表 -->
+      <div class="spec-section">
+        <div class="section-header">
+          <div class="section-title-wrap">
+            <span class="section-title">规程列表</span>
+            <span class="total-badge">共 {{ total }} 条</span>
+          </div>
         </div>
         <el-table
           :data="specList"
@@ -44,13 +50,14 @@
           @row-click="onSpecRowClick"
           :row-class-name="tableRowClassName"
           style="width:100%"
+          class="spec-table"
         >
-          <el-table-column label="编码" prop="specCode" width="110" show-overflow-tooltip />
-          <el-table-column label="名称" prop="specName" show-overflow-tooltip />
-          <el-table-column label="创建时间" prop="createTime" width="100" show-overflow-tooltip>
+          <el-table-column label="编码" prop="specCode" min-width="120" show-overflow-tooltip />
+          <el-table-column label="名称" prop="specName" min-width="180" show-overflow-tooltip />
+          <el-table-column label="创建时间" prop="createTime" width="110" show-overflow-tooltip>
             <template slot-scope="{ row }">{{ (row.createTime || '').substring(0, 10) }}</template>
           </el-table-column>
-          <el-table-column label="" align="right" width="80">
+          <el-table-column label="操作" align="right" width="120" fixed="right">
             <template slot-scope="{ row }">
               <el-button type="text" size="mini" @click.stop="openSpecDialog(row)">编辑</el-button>
               <el-button type="text" size="mini" class="btn-danger" @click.stop="removeSpec(row)">删除</el-button>
@@ -58,64 +65,64 @@
           </el-table-column>
         </el-table>
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-          @pagination="loadSpecs" />
+          @pagination="loadSpecs" class="spec-pagination" />
       </div>
 
-      <!-- 右：版本面板 -->
-      <div class="detail-panel">
-        <template v-if="currentSpec">
-          <div class="panel-hd" v-loading="versionLoading">
-            <div class="detail-title-row">
-              <span class="panel-title">{{ currentSpec.specName }}</span>
-              <span class="spec-code-tag">{{ currentSpec.specCode }}</span>
-            </div>
-            <el-button type="primary" size="mini" icon="el-icon-plus" @click="openVersionDialog()">新建版本</el-button>
+      <!-- 下：版本面板 -->
+      <div class="version-section" v-if="currentSpec">
+        <div class="section-header">
+          <div class="section-title-wrap">
+            <span class="section-title">{{ currentSpec.specName }}</span>
+            <span class="spec-code-tag">{{ currentSpec.specCode }}</span>
           </div>
+          <el-button type="primary" size="mini" icon="el-icon-plus" @click="openVersionDialog()">新建版本</el-button>
+        </div>
 
-          <div v-if="!versionLoading && !versionList.length" class="empty-versions">
-            <i class="el-icon-document" style="font-size:32px;color:#dcdfe6;margin-bottom:8px;display:block" />
-            <span>暂无版本，点击「新建版本」开始</span>
-          </div>
+        <div v-if="!versionLoading && !versionList.length" class="empty-versions">
+          <i class="el-icon-document" style="font-size:32px;color:#dcdfe6;margin-bottom:8px;display:block" />
+          <span>暂无版本，点击「新建版本」开始</span>
+        </div>
 
-          <div class="version-list" v-loading="versionLoading">
-            <div
-              v-for="v in versionList"
-              :key="v.versionId"
-              class="version-card"
-              @click="goPlanSpec(v)"
-            >
-              <div class="vc-left">
-                <div class="vc-top">
-                  <span class="vc-code">{{ v.versionCode }}</span>
-                  <el-tag :type="statusType(v.status)" size="mini" effect="plain" class="vc-status">
-                    {{ statusLabel(v.status) }}
-                  </el-tag>
-                  <el-tag v-if="v.isActive === 1" type="success" size="mini" effect="dark" class="vc-active">当前生效</el-tag>
-                </div>
-                <div class="vc-meta">
-                  创建于 {{ (v.createTime || '').substring(0, 16) || '—' }}
-                  <span v-if="v.updateTime && v.updateTime !== v.createTime" style="margin-left:8px">
-                    · 更新于 {{ (v.updateTime || '').substring(0, 16) }}
-                  </span>
-                </div>
-              </div>
-              <div class="vc-right" @click.stop>
-                <el-switch
-                  :value="v.isActive === 1"
-                  active-color="#5F7BA0"
-                  @change="handleActiveChange(v, $event)"
-                />
-                <el-button type="text" size="mini" @click="openVersionDialog(v)">编辑</el-button>
-                <el-button type="text" size="mini" class="btn-danger" @click="removeVersion(v)">删除</el-button>
-                <el-button type="text" size="mini" class="btn-view" @click="goPlanSpec(v)">方案 →</el-button>
+        <div class="version-grid" v-loading="versionLoading">
+          <div
+            v-for="v in versionList"
+            :key="v.versionId"
+            class="version-card"
+            @click="goPlanSpec(v)"
+          >
+            <div class="vc-header">
+              <span class="vc-code">{{ v.versionCode }}</span>
+              <div class="vc-tags">
+                <el-tag :type="statusType(v.status)" size="mini" effect="plain" class="vc-status">
+                  {{ statusLabel(v.status) }}
+                </el-tag>
+                <el-tag v-if="v.isActive === 1" type="success" size="mini" effect="dark" class="vc-active">当前生效</el-tag>
               </div>
             </div>
+            <div class="vc-meta">
+              创建于 {{ (v.createTime || '').substring(0, 16) || '—' }}
+              <span v-if="v.updateTime && v.updateTime !== v.createTime">
+                · 更新于 {{ (v.updateTime || '').substring(0, 16) }}
+              </span>
+            </div>
+            <div class="vc-actions" @click.stop>
+              <el-switch
+                :value="v.isActive === 1"
+                active-color="#5F7BA0"
+                @change="handleActiveChange(v, $event)"
+              />
+              <el-button type="text" size="mini" @click="openVersionDialog(v)">编辑</el-button>
+              <el-button type="text" size="mini" class="btn-danger" @click="removeVersion(v)">删除</el-button>
+              <el-button type="text" size="mini" class="btn-view" @click="goPlanSpec(v)">方案 →</el-button>
+            </div>
           </div>
-        </template>
+        </div>
+      </div>
 
-        <div v-else class="detail-empty">
+      <div v-else class="version-section empty-section">
+        <div class="detail-empty">
           <i class="el-icon-d-arrow-left" style="font-size:24px;color:#c0c4cc;margin-bottom:12px;display:block" />
-          <span>请在左侧选择一个规程查看其版本</span>
+          <span>请在上方规程列表中选择一个规程查看其版本</span>
         </div>
       </div>
     </div>
@@ -346,89 +353,141 @@ export default {
   min-height: 100%;
   display: flex;
   flex-direction: column;
-}
-
-/* ── 主体布局 ── */
-.master-detail {
-  display: flex;
   gap: 12px;
-  flex: 1;
-  min-height: 0;
-  align-items: flex-start;
 }
 
-/* ── 左：规程列表 ── */
-.master-panel {
-  width: 380px;
-  flex-shrink: 0;
+/* ── 顶部筛选栏 ── */
+/* ── 顶部筛选栏 ── */
+.top-filter-bar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
   background: #fff;
   border: 1px solid #ebeef5;
-  border-radius: 4px;
-  overflow: hidden;
+  border-radius: 6px;
+  flex-shrink: 0;
 }
-
-/* 筛选区 */
-.filter-area {
-  padding: 10px 12px 8px;
-  background: #fafafa;
-  border-bottom: 1px solid #f0f2f5;
+.filter-rows {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
+  flex: 1;
 }
 .filter-row {
   display: flex;
   align-items: center;
   gap: 8px;
+  min-height: 28px;
 }
 .filter-label {
-  font-size: 12px;
-  color: #909399;
+  font-size: 13px;
+  color: #606266;
+  font-weight: 500;
   white-space: nowrap;
-  width: 52px;
+  width: 70px;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+}
+.filter-label-type::after {
+  content: '';
+}
+.filter-label-line {
+  padding: 0 2px;
+}
+.filter-select {
+  flex: 1;
+  max-width: 600px;
+}
+.filter-select ::v-deep .el-radio-group .el-radio-button {
+  margin-right: 2px;
+}
+.filter-select ::v-deep .el-radio-group .el-radio-button__inner {
+  padding: 5px 10px;
+  font-size: 12px;
+}
+.new-spec-btn {
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+/* ── 主体内容区 ── */
+.main-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+  min-height: 0;
+}
+
+/* ── 通用区块样式 ── */
+.spec-section,
+.version-section {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.spec-section {
   flex-shrink: 0;
 }
-.filter-select { flex: 1; }
-
-.panel-hd {
+.version-section {
+  flex: 1;
+  min-height: 200px;
+}
+.empty-section {
   display: flex;
   align-items: center;
-  padding: 8px 12px;
-  border-bottom: 1px solid #f0f2f5;
-  background: #fff;
+  justify-content: center;
 }
-.panel-title {
-  font-size: 13px;
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid #f0f2f5;
+  background: #fafafa;
+}
+.section-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.section-title {
+  font-size: 14px;
   font-weight: 600;
   color: #303133;
 }
 .total-badge {
   font-size: 12px;
   color: #909399;
-  margin-left: 6px;
-}
-
-/* ── 右：版本面板 ── */
-.detail-panel {
-  flex: 1;
-  min-width: 0;
-  background: #fff;
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
-  overflow: hidden;
-}
-.detail-title-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.spec-code-tag {
-  font-size: 11px;
-  color: #909399;
   background: #f0f2f5;
-  padding: 1px 8px;
+  padding: 2px 8px;
   border-radius: 10px;
 }
+.spec-code-tag {
+  font-size: 12px;
+  color: #909399;
+  background: #f0f2f5;
+  padding: 2px 10px;
+  border-radius: 10px;
+}
+
+/* ── 规程表格 ── */
+.spec-table {
+  flex: 1;
+}
+.spec-pagination {
+  padding: 8px 16px;
+  border-top: 1px solid #f0f2f5;
+}
+
+/* ── 空状态 ── */
 .detail-empty, .empty-versions {
   display: flex;
   flex-direction: column;
@@ -439,44 +498,60 @@ export default {
   font-size: 13px;
 }
 
-/* ── 版本卡片 ── */
-.version-list {
-  padding: 10px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+/* ── 版本网格 ── */
+.version-grid {
+  padding: 12px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 12px;
+  overflow-y: auto;
 }
 .version-card {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 14px;
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
+  flex-direction: column;
+  padding: 14px 16px;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
   cursor: pointer;
-  transition: border-color .15s, box-shadow .15s;
+  transition: all 0.2s ease;
   background: #fff;
+  gap: 8px;
 }
 .version-card:hover {
   border-color: #5F7BA0;
-  box-shadow: 0 2px 8px rgba(95,123,160,.12);
+  box-shadow: 0 4px 12px rgba(95,123,160,0.15);
+  transform: translateY(-1px);
+}
+.vc-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
-.vc-left { display: flex; flex-direction: column; gap: 4px; }
-.vc-top { display: flex; align-items: center; gap: 6px; }
 .vc-code {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 600;
   color: #303133;
 }
-.vc-status, .vc-active { border-radius: 10px !important; }
-.vc-meta { font-size: 11px; color: #c0c4cc; }
-.vc-right {
+.vc-tags {
   display: flex;
   align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
+  gap: 6px;
 }
-.btn-view { color: #5F7BA0 !important; }
+.vc-status, .vc-active { border-radius: 10px !important; }
+.vc-meta {
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.5;
+}
+.vc-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #f0f2f5;
+  margin-top: 4px;
+}
+.btn-view { color: #5F7BA0 !important; font-weight: 500; }
 
 /* ── 表格行高亮 ── */
 ::v-deep .el-table .current-row { background: #f0f7ff !important; }