From 5ad4767667c3eac66226dfbf2bd99444e62bfd6b Mon Sep 17 00:00:00 2001
From: JenniferW <1627055433@qq.com>
Date: Thu, 14 Aug 2025 15:25:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AD=A5=E9=AA=A4=E4=BA=8C=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=E5=8F=98=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/order/intention/Step2.vue | 1673 +++++++++++++++++++++++----
 src/views/order/intention/query.vue |  368 +++++-
 2 files changed, 1772 insertions(+), 269 deletions(-)

diff --git a/src/views/order/intention/Step2.vue b/src/views/order/intention/Step2.vue
index 99305a0..b0a0b0c 100644
--- a/src/views/order/intention/Step2.vue
+++ b/src/views/order/intention/Step2.vue
@@ -3,131 +3,220 @@
     <div class="main-row">
       <div class="right-content">
         <div>
-          <!-- 查询条件区：车型、车轴、齿轮箱、车轮、制动盘 -->
-          <div class="param-form-row">
-            <div class="param-form-item">
-              <span class="param-label">车型：</span>
-              <el-select
-                v-model="selectedCarTypeProxy"
-                placeholder="请选择车型"
-                filterable
-                class="param-input"
-                @change="onQuery"
+          <div class="search-box-container">
+            <!-- 主查询区域 -->
+            <div class="search-box">
+              <div
+                class="custom-input-wrapper"
+                :style="{ width: inputWidth + 'px' }"
+                @click="handleInputContainerClick"
               >
-                <el-option-group
-                  v-for="group in carTypeOptions"
-                  :key="group.label"
-                  :label="group.label"
-                >
-                  <el-option
-                    v-for="option in group.options"
-                    :key="option.value"
-                    :label="option.label"
-                    :value="option.value"
-                  />
-                </el-option-group>
-              </el-select>
-            </div>
-            <div class="param-form-item">
-              <span class="param-label">车轴：</span>
-              <el-autocomplete
-                v-model="paramAxle"
-                :fetch-suggestions="queryAxleSuggestions"
-                placeholder="不限"
-                class="param-input"
-              />
-            </div>
-            <div class="param-form-item">
-              <span class="param-label">齿轮箱：</span>
-              <el-autocomplete
-                v-model="paramGearbox"
-                :fetch-suggestions="queryGearboxSuggestions"
-                placeholder="不限"
-                class="param-input"
-              />
-            </div>
-            <div class="param-form-item">
-              <span class="param-label">车轮：</span>
-              <el-autocomplete
-                v-model="paramWheel"
-                :fetch-suggestions="queryWheelSuggestions"
-                placeholder="不限"
-                class="param-input"
-              />
-            </div>
-            <div class="param-form-item">
-              <span class="param-label">制动盘：</span>
-              <el-autocomplete
-                v-model="paramBrake"
-                :fetch-suggestions="queryBrakeSuggestions"
-                placeholder="不限"
-                class="param-input"
-              />
-            </div>
-            <div class="param-form-btns">
-              <el-button type="primary" class="param-btn" @click="onQuery"
-                >查询</el-button
-              >
-            </div>
-          </div>
-          <!-- 查询结果卡片区 -->
-          <div
-            v-if="queryResultList.length"
-            class="result-card-list-wrap"
-            style="position: relative"
-          >
-            <el-button
-              v-if="selectedCompareList.length > 0"
-              type="warning"
-              class="compare-btn-float"
-              @click="onCompare"
-              circle
-            >
-              参数<br />对比
-            </el-button>
-            <div class="result-card-list">
-              <el-card
-                v-for="item in queryResultList"
-                :key="item.code"
-                class="result-card"
-                :class="{ active: item.selected }"
-                @click="toggleSelect(item)"
-              >
-                <div class="result-card-checkbox-wrap" @click.stop>
-                  <el-checkbox
-                    v-model="item.selected"
-                    class="result-card-checkbox"
-                  />
-                </div>
-                <img
-                  :src="item.image"
-                  class="result-card-img"
-                  @click.stop="toggleSelect(item)"
+                <el-input
+                  v-model="currentInput"
+                  ref="searchInput"
+                  placeholder="输入查询条件，例如: 品号:D311299000045-00005;..."
+                  class="main-input"
+                  @input="handleInput"
+                  @keydown.enter="handleSearch"
+                  @keydown.arrow-down="focusFirstSuggestion"
+                  @keydown.escape="hideSuggestions"
+                  @keydown="handleKeydown"
+                  @click="handleInputClick"
+                  @mouseup="handleInputMouseUp"
                 />
-                <div class="result-card-info">
-                  <div class="result-card-name">{{ item.label }}</div>
-                  <div class="result-card-code">{{ item.code }}</div>
+              </div>
+
+              <!-- 下拉建议框 -->
+              <div
+                v-if="
+                  showSuggestions &&
+                  (suggestions.length > 0 || possibleFields.length > 0)
+                "
+                class="suggestions-dropdown"
+                :style="{ width: inputWidth + 'px' }"
+              >
+                <!-- 可能的字段提示项 -->
+                <div
+                  v-if="possibleFields.length > 0"
+                  class="possible-fields-section"
+                >
+                  <div class="possible-fields-header">
+                    您输入的条件可能属于以下字段：
+                  </div>
+                  <div
+                    v-for="(field, index) in possibleFields"
+                    :key="'field-' + index"
+                    class="possible-field-item"
+                    :class="{ active: activePossibleFieldIndex === index }"
+                    @click="selectPossibleField(field)"
+                    @mouseenter="activePossibleFieldIndex = index"
+                    @keydown.enter.stop="selectPossibleField(field)"
+                    @keydown.arrow-down.stop="navigatePossibleFields('down')"
+                    @keydown.arrow-up.stop="navigatePossibleFields('up')"
+                    tabindex="0"
+                  >
+                    <span class="field-type">[字段]</span>
+                    <span>{{ field.label }}</span>
+                    <span class="field-hint">: </span>
+                  </div>
                 </div>
-              </el-card>
+
+                <div
+                  v-for="(item, index) in suggestions"
+                  :key="index"
+                  class="suggestion-item"
+                  :class="{
+                    active:
+                      activeSuggestionIndex ===
+                      index +
+                        (possibleFields.length > 0
+                          ? 1 + possibleFields.length
+                          : 0),
+                  }"
+                  @click="selectSuggestion(item)"
+                  @mouseenter="
+                    activeSuggestionIndex =
+                      index +
+                      (possibleFields.length > 0
+                        ? 1 + possibleFields.length
+                        : 0)
+                  "
+                  @keydown.enter.stop="selectSuggestion(item)"
+                  @keydown.arrow-down.stop="navigateSuggestions('down')"
+                  @keydown.arrow-up.stop="navigateSuggestions('up')"
+                  tabindex="0"
+                >
+                  <span v-if="item.type === 'field'" class="field-type"
+                    >[字段]</span
+                  >
+                  <span v-if="item.type === 'value'" class="value-type"
+                    >[值]</span
+                  >
+                  <span>{{ item.label }}</span>
+                  <span v-if="item.type === 'field'" class="field-hint"
+                    >:
+                  </span>
+                </div>
+              </div>
+
+              <!-- 查询按钮 -->
+              <el-button
+                type="primary"
+                class="search-button"
+                @click="handleSearch"
+              >
+                <el-icon><Search /></el-icon>
+                查询
+              </el-button>
+            </div>
+
+            <!-- 条件标签展示 -->
+            <div v-if="parsedConditions.length > 0" class="conditions-tags">
+              <el-tag
+                v-for="(cond, index) in parsedConditions"
+                :key="index"
+                closable
+                :type="cond.valid ? 'success' : 'danger'"
+                @close="removeCondition(index)"
+                @click="focusConditionTag(index)"
+                class="condition-tag"
+              >
+                <span v-if="cond.field" class="tag-field"
+                  >{{ cond.fieldLabel }}:</span
+                >
+                <span
+                  class="tag-value"
+                  @click.stop="focusConditionTag(index)"
+                  >{{ cond.value }}</span
+                >
+                <el-icon class="tag-edit-icon" size="14"><Edit /></el-icon>
+              </el-tag>
+              <el-button type="text" @click="clearAll" class="clear-button">
+                <el-icon><RefreshLeft /></el-icon>
+                清除所有
+              </el-button>
             </div>
           </div>
-          <!-- 参数对比弹窗 -->
+
+          <!-- 查询结果区域 -->
+          <div class="results-section" v-if="showResults">
+            <div
+              v-if="filteredData.length"
+              class="result-card-list-wrap"
+              style="position: relative"
+            >
+              <el-button
+                v-if="selectedCompareList.length > 0"
+                type="warning"
+                class="compare-btn-float"
+                @click="onCompare"
+                circle
+              >
+                参数<br />对比
+              </el-button>
+              <div class="result-card-list">
+                <el-card
+                  v-for="item in filteredData"
+                  :key="item.productNumber"
+                  class="result-card"
+                  :class="{ active: item.selected }"
+                  @click="toggleSelect(item)"
+                >
+                  <div class="result-card-checkbox-wrap" @click.stop>
+                    <el-checkbox
+                      v-model="item.selected"
+                      class="result-card-checkbox"
+                    />
+                  </div>
+                  <img
+                    :src="item.image"
+                    class="result-card-img"
+                    :alt="item.name"
+                    @click.stop="toggleSelect(item)"
+                  />
+                  <div class="result-card-info">
+                    <div class="result-card-name">{{ item.name }}</div>
+                    <div class="result-card-code">{{ item.productNumber }}</div>
+                    <div class="result-card-spec">
+                      {{ item.specificationModel }}
+                    </div>
+                    <div class="result-card-car-model">
+                      适用车型: {{ item.carModel }}
+                    </div>
+                  </div>
+                </el-card>
+              </div>
+            </div>
+
+            <div v-if="filteredData.length === 0" class="no-results">
+              <el-empty description="没有匹配的结果"></el-empty>
+            </div>
+          </div>
+
+          <!-- 参数对比弹窗 - 使用query.vue的实现但保留step2的样式 -->
           <el-dialog
             v-model="compareDialogVisible"
             title="参数对比"
-            width="60%"
+            width="80%"
             top="40px"
             :close-on-click-modal="false"
           >
             <!-- 表格对比区，图片放在表头下方 -->
             <div class="compare-table-wrap">
               <el-table :data="compareTableData" border style="width: 100%">
-                <el-table-column prop="param" label="差异参数" width="180" class-name="param-col" align="center" header-align="center" />
+                <el-table-column
+                  prop="param"
+                  label="参数"
+                  width="180"
+                  class-name="param-col"
+                  align="center"
+                  header-align="center"
+                />
                 <el-table-column
                   v-for="item in selectedCompareList"
-                  :key="item.code"
-                  :label="item.code"
-                  :prop="item.code"
+                  :key="item.productNumber"
+                  :label="item.productNumber"
+                  :prop="item.productNumber"
                   align="center"
                   header-align="center"
                 >
@@ -142,12 +231,12 @@
                       <img
                         v-if="
                           selectedCompareList.find(
-                            (i) => i.code === column.label
+                            (i) => i.productNumber === column.label
                           )?.image
                         "
                         :src="
                           selectedCompareList.find(
-                            (i) => i.code === column.label
+                            (i) => i.productNumber === column.label
                           ).image
                         "
                         style="
@@ -158,8 +247,18 @@
                           border-radius: 4px;
                           border: 1px solid #eee;
                         "
+                        :alt="
+                          selectedCompareList.find(
+                            (i) => i.productNumber === column.label
+                          ).name
+                        "
                       />
                       <span>{{ column.label }}</span>
+                      <span style="font-size: 12px; color: #666">{{
+                        selectedCompareList.find(
+                          (i) => i.productNumber === column.label
+                        ).name
+                      }}</span>
                     </div>
                   </template>
                 </el-table-column>
@@ -173,34 +272,26 @@
         </div>
       </div>
     </div>
-    <!-- 车型信息弹窗 -->
-    <car-model-dialog
-      v-model="carModelDialogVisible"
-      :car-model="selectedCarModel"
-    />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from "vue";
+import { ref, computed, watch, onMounted, nextTick } from "vue";
 import {
   carTypeOptions,
-  allParts,
-  compareTableData,
+  allParts, // 保留原始数据，但实际查询会使用新的查询逻辑
 } from "@/data/stepMockData";
 import CarModelDialog from "@/components/CarModelDialog.vue";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElEmpty } from "element-plus";
 
+// 接收props和定义emit，保留step2的原有逻辑
 const props = defineProps({
   form: Object,
   selectedCarType: String,
 });
 const emit = defineEmits(["update:form", "prev-step", "next-step"]);
 
-const carModelDialogVisible = ref(false);
-const selectedCarModel = ref(null);
-
-// 彻底双向绑定
+// 彻底双向绑定，保留step2的原有逻辑
 const selectedCarTypeProxy = computed({
   get() {
     return props.form?.selectedCarType ?? "";
@@ -213,64 +304,999 @@ const selectedCarTypeProxy = computed({
   },
 });
 
-const paramAxle = ref("");
-const paramGearbox = ref("");
-const paramWheel = ref("");
-const paramBrake = ref("");
+// 从query.vue引入的查询相关变量
+const currentInput = ref("");
+const searchInput = ref(null);
+const inputWidth = ref(600);
+const selectedConditionIndex = ref(-1);
 
+// 建议相关
+const suggestions = ref([]);
+const showSuggestions = ref(false);
+const activeSuggestionIndex = ref(-1);
+const possibleFields = ref([]);
+const activePossibleFieldIndex = ref(-1);
+
+// 解析后的条件和查询结果
+const parsedConditions = ref([]);
+const showResults = ref(false);
+const filteredData = ref([]); // 使用query.vue的filteredData替代原有的queryResultList
+
+// 对比相关，整合query.vue的逻辑但保留step2的样式和部分逻辑
+const compareDialogVisible = ref(false);
+const selectedCompareList = computed(() =>
+  filteredData.value.filter((i) => i.selected)
+);
+
+// 生成对比表格数据 - 采用query.vue的实现
+const compareTableData = computed(() => {
+  if (selectedCompareList.value.length <= 1) return [];
+
+  // 需要对比的参数列表
+  const paramsToCompare = [
+    "品名/物料名称",
+    "品号",
+    "图号",
+    "品号-规格型号",
+    "车型",
+    "型号",
+    "材质",
+    "采购属性",
+    "车轮踏面形式",
+    "油漆制造商",
+  ];
+
+  // 字段映射关系
+  const fieldMap = {
+    "品名/物料名称": "name",
+    品号: "productNumber",
+    图号: "drawingNumber",
+    "品号-规格型号": "specificationModel",
+    车型: "carModel",
+    型号: "model",
+    材质: "material",
+    采购属性: "procurementAttributes",
+    车轮踏面形式: "wheelTread",
+    油漆制造商: "paintManufacturer",
+  };
+
+  // 构建对比数据
+  return paramsToCompare.map((param) => {
+    const row = { param };
+    selectedCompareList.value.forEach((item) => {
+      row[item.productNumber] = item[fieldMap[param]] || "-";
+    });
+    return row;
+  });
+});
+
+// 定义可查询的字段 - 来自query.vue
+const allFields = [
+  { key: "productNumber", label: "品号" },
+  { key: "name", label: "品名/物料名称" },
+  { key: "drawingNumber", label: "图号" },
+  { key: "specificationModel", label: "品号-规格型号" },
+  { key: "carModel", label: "车型" },
+  { key: "model", label: "型号" },
+  { key: "material", label: "材质" },
+  { key: "procurementAttributes", label: "采购属性" },
+  { key: "wheelTread", label: "车轮踏面形式" },
+  { key: "paintManufacturer", label: "油漆制造商" },
+  { key: "image", label: "图片" },
+];
+
+// 模拟数据 - 来自query.vue，实际项目中可能从API获取
+const mockData = [
+  {
+    productNumber: "D311299000045-00005",
+    name: "非动力车轴（带喷漆）",
+    drawingNumber: "ZQ1022009-001",
+    specificationModel: "(GBTA2 ZQ/LRS EA4T)(Weckerle)-四方股份",
+    carModel: "CR400AF",
+    model: "GBTA2",
+    material: null,
+    procurementAttributes: "自采",
+    wheelTread: null,
+    paintManufacturer: "Weckerle",
+    image: "/images/cars/1_1_1.jpg",
+    selected: false,
+  },
+  {
+    productNumber: "D311299000044-00005",
+    name: "动力车轴（带喷漆）",
+    drawingNumber: "ZQ1022009-004",
+    specificationModel: "(GBDA2A ZQ/LRS EA4T)(Weckerle)-四方股份",
+    carModel: "CR400AF",
+    model: "GBDA2A",
+    material: null,
+    procurementAttributes: "自采",
+    wheelTread: null,
+    paintManufacturer: "Weckerle",
+    image: "/images/cars/1_1_2.jpg",
+    selected: false,
+  },
+  {
+    productNumber: "D311102000025-00022",
+    name: "非动力车轮（带降噪板+喷漆）",
+    drawingNumber: "ZQ1014001-100(ZQ1014001-090)",
+    specificationModel: "(GBTW21B 等级6 ZQ /LRS ER8)(天津纵横)Weckerle-CRC",
+    carModel: "CR400BF",
+    model: "GBTW21B",
+    material: "ER8",
+    procurementAttributes: "自采",
+    wheelTread: "LMB10",
+    paintManufacturer: "Weckerle",
+    image: "/images/cars/1_2_1.jpg",
+    selected: false,
+  },
+  {
+    productNumber: "D311102000025-00021",
+    name: "非动力车轮（带降噪板+喷漆）",
+    drawingNumber: "ZQ1014001-100(ZQ1014001-090)",
+    specificationModel: "(GBTW21B 等级3 ZQ /LRS ER8)(天津纵横)Weckerle-CRC",
+    carModel: "CR400BF",
+    model: "GBTW21B",
+    material: "ER8",
+    procurementAttributes: "自采",
+    wheelTread: "LMB10",
+    paintManufacturer: "Weckerle",
+    image: "/images/cars/1_2.jpg",
+    selected: false,
+  },
+  {
+    productNumber: "D311199000035-00037",
+    name: "动力车轮（带喷漆）",
+    drawingNumber: "ZQ1014001-090",
+    specificationModel: "(GBDW21B 等级5 ZQ/LRS ER8)Weckerle-CRC",
+    carModel: "CR400BF",
+    model: "GBDW21B",
+    material: null,
+    procurementAttributes: "自采",
+    wheelTread: "LMB10",
+    paintManufacturer: "Weckerle",
+    image: "/images/cars/1_2_1_1.jpg",
+    selected: false,
+  },
+  {
+    productNumber: "D311199020097-00006",
+    name: "精加工动力车轮",
+    drawingNumber: "CCD2001-03-21-0001-DA",
+    specificationModel: "GBDW21B 等级5 ZQ/LRS ER8-CRC",
+    carModel: "CR400BF",
+    model: "GBDW21B",
+    material: null,
+    procurementAttributes: "自采",
+    wheelTread: "LMB10",
+    paintManufacturer: "Weckerle",
+    image: "/images/cars/2.jpg",
+    selected: false,
+  },
+  {
+    productNumber: "D311102010007-00037",
+    name: "非动力车轮（带降噪板）",
+    drawingNumber: "TKD0601-00-00-03",
+    specificationModel: "(GBTW21B 等级5 ZQ/LRS ER8)(天津纵横)-CRC",
+    carModel: "CR400BF",
+    model: "GBDW21B",
+    material: "ER8",
+    procurementAttributes: "自采",
+    wheelTread: "LMB10",
+    paintManufacturer: null,
+    image: "/images/cars/3.jpg",
+    selected: false,
+  },
+  {
+    productNumber: "D325000000014-10001",
+    name: "右轴箱组成",
+    drawingNumber: "ZQ1014001-117",
+    specificationModel: "检修",
+    carModel: "CR400BF",
+    model: null,
+    material: null,
+    procurementAttributes: null,
+    wheelTread: null,
+    paintManufacturer: null,
+    image: "/images/cars/4.jpg",
+    selected: false,
+  },
+];
+
+// 字段值关联映射 - 用于智能提示
+const fieldValueMap = {
+  productNumber: [
+    "D311299000045-00005",
+    "D311299000044-00005",
+    "D311102000025-00022",
+    "D311102000025-00021",
+    "D311199000035-00037",
+    "D311199020097-00006",
+    "D311102010007-00037",
+    "D325000000014-10001",
+  ],
+  name: [
+    "非动力车轴（带喷漆）",
+    "动力车轴（带喷漆）",
+    "非动力车轮（带降噪板+喷漆）",
+    "动力车轮（带喷漆）",
+    "精加工动力车轮",
+    "非动力车轮（带降噪板）",
+    "右轴箱组成",
+  ],
+  drawingNumber: [
+    "ZQ1022009-001",
+    "ZQ1022009-004",
+    "ZQ1014001-100(ZQ1014001-090)",
+    "ZQ1014001-090",
+    "CCD2001-03-21-0001-DA",
+    "TKD0601-00-00-03",
+    "ZQ1014001-117",
+  ],
+  specificationModel: [
+    "(GBTA2 ZQ/LRS EA4T)(Weckerle)-四方股份",
+    "(GBDA2A ZQ/LRS EA4T)(Weckerle)-四方股份",
+    "(GBTW21B 等级6 ZQ /LRS ER8)(天津纵横)Weckerle-CRC",
+    "(GBTW21B 等级3 ZQ /LRS ER8)(天津纵横)Weckerle-CRC",
+    "(GBDW21B 等级5 ZQ/LRS ER8)Weckerle-CRC",
+    "(GBTW21B 等级5 ZQ/LRS ER8)(天津纵横)-CRC",
+    "GBDW21B 等级5 ZQ/LRS ER8-CRC",
+    "检修",
+  ],
+  carModel: ["CR400AF", "CR400BF"],
+  model: ["GBTA2", "GBDA2A", "GBTW21B", "GBDW21B"],
+  material: ["ER8"],
+  procurementAttributes: ["自采"],
+  wheelTread: ["LMB10"],
+  paintManufacturer: ["Weckerle"],
+  image: [
+    "/images/cars/1_1_1.jpg",
+    "/images/cars/1_1_2.jpg",
+    "/images/cars/1_2_1.jpg",
+    "/images/cars/1_2.jpg",
+    "/images/cars/1_2_1_1.jpg",
+    "/images/cars/2.jpg",
+    "/images/cars/3.jpg",
+    "/images/cars/4.jpg",
+  ],
+};
+
+// 收集所有可能的值用于匹配
+const allValues = ref([]);
+
+// 初始化所有可能的值
+const initializeValues = () => {
+  const values = [];
+  allFields.forEach((field) => {
+    const uniqueValues = [...new Set(mockData.map((item) => item[field.key]))];
+    uniqueValues.forEach((value) => {
+      values.push({
+        value: String(value),
+        fieldKey: field.key,
+        fieldLabel: field.label,
+        weight: fieldValueMap[field.key]?.includes(String(value)) ? 2 : 1,
+      });
+    });
+  });
+  allValues.value = values;
+};
+
+// 从query.vue引入的查询相关方法
+const getCurrentInputPart = () => {
+  const parts = currentInput.value.split(";");
+  return parts[parts.length - 1].trim();
+};
+
+const handleKeydown = (e) => {
+  // 检查是否按下了分号键
+  if (e.key === ";" || e.keyCode === 186) {
+    handleSemicolon(e);
+  }
+};
+
+// 处理分号输入
+const handleSemicolon = (e) => {
+  // 如果是空值或最后一个字符已经是分号，则不处理
+  if (!currentInput.value.trim() || currentInput.value.endsWith(";")) {
+    e.preventDefault();
+    return;
+  }
+
+  // 延迟处理，确保分号已添加到输入框
+  setTimeout(() => {
+    // 触发输入事件以更新建议
+    handleInput(currentInput.value);
+  }, 0);
+};
+
+// 查找光标所在的条件位置
+const findCursorConditionIndex = () => {
+  if (!searchInput.value) return -1;
+
+  const inputEl = searchInput.value.$el.querySelector("input");
+  if (!inputEl) return -1;
+
+  const cursorPos = inputEl.selectionStart;
+  const inputValue = currentInput.value;
+  const parts = inputValue.split(";");
+
+  let currentLength = 0;
+  for (let i = 0; i < parts.length; i++) {
+    // 加上分号的长度
+    const partLength = parts[i].length + 1;
+    if (cursorPos <= currentLength + partLength) {
+      return i;
+    }
+    currentLength += partLength;
+  }
+
+  return parts.length - 1;
+};
+
+// 处理输入框容器点击
+const handleInputContainerClick = (e) => {
+  // 不需要处理箭头相关逻辑了
+};
+
+// 处理输入框点击事件 - 支持点击已输入值显示下拉
+const handleInputClick = () => {
+  const index = findCursorConditionIndex();
+  const parts = currentInput.value.split(";");
+
+  if (index >= 0 && index < parts.length) {
+    const part = parts[index].trim();
+    if (part) {
+      selectedConditionIndex.value = index;
+      // 触发该条件的建议显示
+      triggerConditionSuggestions(part);
+    }
+  }
+};
+
+// 处理输入框鼠标抬起事件 - 支持选择文本后显示下拉
+const handleInputMouseUp = () => {
+  handleInputClick();
+};
+
+// 聚焦到指定的条件标签
+const focusConditionTag = (index) => {
+  const parts = currentInput.value.split(";");
+  if (index < parts.length) {
+    // 将光标定位到该条件
+    selectedConditionIndex.value = index;
+    const inputEl = searchInput.value.$el.querySelector("input");
+
+    if (!inputEl) return;
+
+    // 计算该条件在输入框中的位置
+    let material = 0;
+    for (let i = 0; i < index; i++) {
+      material += parts[i].length + 1; // +1 是分号的长度
+    }
+
+    // 设置光标位置
+    setTimeout(() => {
+      inputEl.focus();
+      inputEl.setSelectionRange(material, material + parts[index].length);
+      // 触发该条件的建议显示
+      triggerConditionSuggestions(parts[index].trim());
+    }, 0);
+  }
+};
+
+// 触发特定条件的建议显示
+const triggerConditionSuggestions = (conditionText) => {
+  if (!conditionText) {
+    suggestions.value = [];
+    possibleFields.value = [];
+    return;
+  }
+
+  const colonIndex = conditionText.indexOf(":");
+  showSuggestions.value = true;
+
+  if (colonIndex > -1) {
+    // 已有字段和值，显示该字段的可能值
+    const fieldLabel = conditionText.substring(0, colonIndex).trim();
+    const valuePart = conditionText.substring(colonIndex + 1).trim();
+
+    const field = allFields.find((f) => f.label === fieldLabel);
+
+    if (field) {
+      // 显示该字段的所有可能值
+      const fieldValues = allValues.value
+        .filter((item) => item.fieldKey === field.key)
+        .map((item) => ({
+          type: "value",
+          label: item.value,
+          value: item.value,
+          fieldKey: item.fieldKey,
+          fieldLabel: item.fieldLabel,
+          weight: item.weight,
+        }));
+
+      // 按匹配度排序
+      fieldValues.sort((a, b) => {
+        const aMatch = a.label.toLowerCase().includes(valuePart.toLowerCase())
+          ? 0
+          : 1;
+        const bMatch = b.label.toLowerCase().includes(valuePart.toLowerCase())
+          ? 0
+          : 1;
+        return aMatch - bMatch || a.label.localeCompare(b.label);
+      });
+
+      suggestions.value = fieldValues.slice(0, 8);
+      possibleFields.value = []; // 已有字段时不显示可能的字段
+    }
+  } else {
+    // 只有值，没有字段，使用原有逻辑
+    handleInput(currentInput.value);
+  }
+};
+
+// 处理输入事件，实时生成建议
+const handleInput = (value) => {
+  // 获取当前正在输入的条件部分（分号后面的部分）
+  const parts = value.split(";");
+  const currentPart = parts[parts.length - 1].trim();
+
+  // 检查是否在编辑已有条件
+  const cursorIndex = findCursorConditionIndex();
+  if (cursorIndex >= 0 && cursorIndex < parts.length - 1) {
+    // 正在编辑中间的条件，使用特殊处理
+    triggerConditionSuggestions(parts[cursorIndex].trim());
+    return;
+  }
+
+  // 始终显示建议框，除非输入为空
+  showSuggestions.value = value.trim() !== "";
+
+  // 如果当前部分为空，不显示具体建议
+  if (!currentPart) {
+    suggestions.value = [];
+    possibleFields.value = [];
+    return;
+  }
+
+  // 检查当前是否在输入字段还是值
+  const isEditingField = !currentPart.includes(":");
+
+  // 查找匹配的字段和值
+  let fieldSuggestions = [];
+  let valueSuggestions = [];
+
+  if (isEditingField) {
+    // 正在输入字段或值的开始部分，同时查找字段和值
+    fieldSuggestions = allFields
+      .filter((field) =>
+        field.label.toLowerCase().includes(currentPart.toLowerCase())
+      )
+      .map((field) => ({
+        type: "field",
+        label: field.label,
+        value: field.key,
+        weight: 3, // 字段建议权重更高
+      }));
+
+    // 查找可能匹配的值，并检查是否有强关联的字段
+    const potentialValues = allValues.value
+      .filter((item) =>
+        String(item.value).toLowerCase().includes(currentPart.toLowerCase())
+      )
+      .map((item) => ({
+        type: "value",
+        label: item.value,
+        value: item.value,
+        fieldKey: item.fieldKey,
+        fieldLabel: item.fieldLabel,
+        weight: item.weight,
+      }));
+
+    // 检查是否有值强烈匹配某个字段
+    const valueFieldCounts = {};
+    potentialValues.forEach((val) => {
+      if (!valueFieldCounts[val.fieldKey]) {
+        valueFieldCounts[val.fieldKey] = {
+          count: 0,
+          label: val.fieldLabel,
+          field: allFields.find((f) => f.key === val.fieldKey),
+        };
+      }
+      valueFieldCounts[val.fieldKey].count += val.weight;
+    });
+
+    // 提取并排序可能的字段
+    possibleFields.value = Object.values(valueFieldCounts)
+      .filter((item) => item.count > 1) // 只显示有足够匹配度的字段
+      .sort((a, b) => b.count - a.count) // 按匹配度排序
+      .map((item) => item.field);
+
+    valueSuggestions = potentialValues;
+  } else {
+    // 已经有字段，只查找值
+    const colonIndex = currentPart.indexOf(":");
+    const fieldLabel = currentPart.substring(0, colonIndex).trim();
+    const valuePart = currentPart.substring(colonIndex + 1).trim();
+
+    // 查找对应的字段
+    const field = allFields.find((f) => f.label === fieldLabel);
+
+    if (field) {
+      // 只查找该字段的值
+      valueSuggestions = allValues.value
+        .filter(
+          (item) =>
+            item.fieldKey === field.key &&
+            String(item.value).toLowerCase().includes(valuePart.toLowerCase())
+        )
+        .map((item) => ({
+          type: "value",
+          label: item.value,
+          value: item.value,
+          fieldKey: item.fieldKey,
+          fieldLabel: item.fieldLabel,
+          weight: item.weight,
+        }));
+    } else {
+      // 字段无效，查找所有值
+      valueSuggestions = allValues.value
+        .filter((item) =>
+          String(item.value).toLowerCase().includes(currentPart.toLowerCase())
+        )
+        .map((item) => ({
+          type: "value",
+          label: item.value,
+          value: item.value,
+          fieldKey: item.fieldKey,
+          fieldLabel: item.fieldLabel,
+          weight: item.weight,
+        }));
+    }
+
+    possibleFields.value = []; // 已有字段时不显示可能的字段
+  }
+
+  // 合并建议并按相关性排序
+  let allSuggestions = [...fieldSuggestions, ...valueSuggestions];
+
+  // 根据权重和匹配程度排序
+  allSuggestions.sort((a, b) => {
+    // 权重高的排在前面
+    if (b.weight !== a.weight) {
+      return b.weight - a.weight;
+    }
+
+    // 更精确的匹配排在前面
+    const aMatch = a.label.toLowerCase().indexOf(currentPart.toLowerCase());
+    const bMatch = b.label.toLowerCase().indexOf(currentPart.toLowerCase());
+    if (aMatch !== bMatch) {
+      return aMatch - bMatch;
+    }
+
+    // 短的排在前面
+    return a.label.length - b.label.length;
+  });
+
+  // 去重并限制数量
+  const uniqueSuggestions = [];
+  const seenLabels = new Set();
+  allSuggestions.forEach((suggestion) => {
+    if (!seenLabels.has(suggestion.label)) {
+      seenLabels.add(suggestion.label);
+      uniqueSuggestions.push(suggestion);
+    }
+  });
+
+  suggestions.value = uniqueSuggestions.slice(0, 8);
+
+  // 重置激活的建议索引
+  activeSuggestionIndex.value = -1;
+  activePossibleFieldIndex.value = -1;
+};
+
+// 选择可能的字段
+const selectPossibleField = (field) => {
+  const parts = currentInput.value.split(";");
+  let targetIndex =
+    selectedConditionIndex.value >= 0
+      ? selectedConditionIndex.value
+      : parts.length - 1;
+
+  // 确保索引有效
+  if (targetIndex < 0 || targetIndex >= parts.length) {
+    targetIndex = parts.length - 1;
+  }
+
+  // 获取当前部分的值
+  let targetPart = parts[targetIndex] || "";
+
+  // 在当前值前添加字段名和冒号
+  parts[targetIndex] = `${field.label}:${targetPart}`;
+
+  // 重新拼接条件，清理多余分号
+  currentInput.value = parts.join(";").replace(/;;+/g, ";").trim();
+
+  // 保持建议框显示，允许继续编辑
+  setTimeout(() => {
+    handleInput(currentInput.value);
+  }, 0);
+
+  // 聚焦输入框并将光标定位到字段后的适当位置
+  searchInput.value.focus();
+  const inputEl = searchInput.value.$el.querySelector("input");
+  if (inputEl) {
+    // 计算光标应该在的位置（字段名+冒号之后）
+    let cursorPos = 0;
+    for (let i = 0; i < targetIndex; i++) {
+      cursorPos += parts[i].length + 1; // +1 是分号的长度
+    }
+    cursorPos += field.label.length + 1; // 字段名长度 + 冒号
+
+    inputEl.setSelectionRange(cursorPos, cursorPos);
+  }
+};
+
+// 导航可能的字段
+const navigatePossibleFields = (direction) => {
+  if (!showSuggestions.value || possibleFields.value.length === 0) return;
+
+  if (direction === "down") {
+    activePossibleFieldIndex.value =
+      (activePossibleFieldIndex.value + 1) % possibleFields.value.length;
+  } else {
+    activePossibleFieldIndex.value =
+      (activePossibleFieldIndex.value - 1 + possibleFields.value.length) %
+      possibleFields.value.length;
+  }
+
+  // 滚动到激活的字段
+  const fieldElements = document.querySelectorAll(".possible-field-item");
+  if (fieldElements[activePossibleFieldIndex.value]) {
+    fieldElements[activePossibleFieldIndex.value].scrollIntoView({
+      block: "nearest",
+    });
+  }
+};
+
+// 提取运算符
+const getOperator = (conditionValue) => {
+  const operators = [">=", "<=", "!=", ">", "<", "="];
+  return operators.find((op) => conditionValue.startsWith(op));
+};
+
+// 选择建议项 - 支持替换已有条件的值
+const selectSuggestion = (item) => {
+  const parts = currentInput.value.split(";");
+  let targetIndex =
+    selectedConditionIndex.value >= 0
+      ? selectedConditionIndex.value
+      : parts.length - 1;
+
+  // 确保索引有效
+  if (targetIndex < 0 || targetIndex >= parts.length) {
+    targetIndex = parts.length - 1;
+  }
+
+  let targetPart = parts[targetIndex] || "";
+
+  if (item.type === "field") {
+    // 字段建议：直接替换为「字段:」格式
+    parts[targetIndex] = `${item.label}:`;
+  } else {
+    // 值建议处理
+    const colonIndex = targetPart.indexOf(":");
+    const operator = getOperator(targetPart.split(":").pop() || "");
+
+    if (colonIndex > -1) {
+      // 已有字段部分
+      const fieldPart = targetPart.substring(0, colonIndex + 1);
+
+      if (operator) {
+        // 带有运算符的情况，保留运算符结构
+        const operatorIndex = targetPart.indexOf(operator, colonIndex);
+        const prefix = targetPart.substring(0, operatorIndex + operator.length);
+        parts[targetIndex] = `${prefix}${item.label}`;
+      } else {
+        // 普通值替换
+        parts[targetIndex] = `${fieldPart}${item.label}`;
+      }
+    } else {
+      // 无字段时直接处理值
+      parts[targetIndex] = targetPart
+        ? `${targetPart}${item.label}`
+        : item.label;
+    }
+  }
+
+  // 重新拼接条件，清理多余分号
+  currentInput.value = parts.join(";").replace(/;;+/g, ";").trim();
+
+  // 保持建议框显示，允许继续编辑
+  setTimeout(() => {
+    handleInput(currentInput.value);
+  }, 0);
+
+  // 聚焦输入框并将光标定位到末尾
+  searchInput.value.focus();
+  const inputEl = searchInput.value.$el.querySelector("input");
+  if (inputEl) {
+    // 计算光标应该在的位置
+    let cursorPos = 0;
+    for (let i = 0; i < targetIndex; i++) {
+      cursorPos += parts[i].length + 1; // +1 是分号的长度
+    }
+    cursorPos += parts[targetIndex].length;
+
+    inputEl.setSelectionRange(cursorPos, cursorPos);
+  }
+};
+
+// 导航建议项（上下箭头）
+const navigateSuggestions = (direction) => {
+  if (!showSuggestions.value || suggestions.value.length === 0) return;
+
+  const totalPossibleFields = possibleFields.value.length;
+  const totalItems =
+    suggestions.value.length +
+    (totalPossibleFields > 0 ? 1 + totalPossibleFields : 0);
+
+  if (direction === "down") {
+    activeSuggestionIndex.value =
+      (activeSuggestionIndex.value + 1) % totalItems;
+  } else {
+    activeSuggestionIndex.value =
+      (activeSuggestionIndex.value - 1 + totalItems) % totalItems;
+  }
+
+  // 如果有可选字段，处理导航逻辑
+  if (totalPossibleFields > 0) {
+    // 导航进入字段区域
+    if (activeSuggestionIndex.value <= totalPossibleFields) {
+      activePossibleFieldIndex.value = activeSuggestionIndex.value - 1;
+      activeSuggestionIndex.value = -1;
+      return;
+    } else {
+      activePossibleFieldIndex.value = -1;
+      activeSuggestionIndex.value -= 1 + totalPossibleFields;
+    }
+  }
+
+  // 滚动到激活的建议项
+  const suggestionElements = document.querySelectorAll(".suggestion-item");
+  if (suggestionElements[activeSuggestionIndex.value]) {
+    suggestionElements[activeSuggestionIndex.value].scrollIntoView({
+      block: "nearest",
+    });
+  }
+};
+
+// 聚焦第一个建议项
+const focusFirstSuggestion = () => {
+  if (showSuggestions.value) {
+    if (possibleFields.value.length > 0) {
+      // 先聚焦到可能的字段
+      activePossibleFieldIndex.value = 0;
+      const firstField = document.querySelector(".possible-field-item");
+      if (firstField) firstField.focus();
+    } else if (suggestions.value.length > 0) {
+      // 再聚焦到建议项
+      activeSuggestionIndex.value = 0;
+      const firstElement = document.querySelector(".suggestion-item");
+      if (firstElement) firstElement.focus();
+    }
+  }
+};
+
+// 隐藏建议
+const hideSuggestions = () => {
+  showSuggestions.value = false;
+  possibleFields.value = [];
+};
+
+// 解析查询条件
+const parseConditions = (input) => {
+  const conditions = [];
+  const parts = input
+    .split(";")
+    .map((part) => part.trim())
+    .filter((part) => part);
+
+  parts.forEach((part) => {
+    // 检查是否包含字段名（冒号分隔）
+    const colonIndex = part.indexOf(":");
+    if (colonIndex > 0) {
+      const fieldLabel = part.substring(0, colonIndex).trim();
+      const valuePart = part.substring(colonIndex + 1).trim();
+
+      // 查找对应的字段key
+      const field = allFields.find((f) => f.label === fieldLabel);
+
+      conditions.push({
+        fieldLabel,
+        field: field ? field.key : null,
+        value: valuePart,
+        valid: !!field,
+      });
+    } else {
+      // 没有字段名，默认为值查询
+      conditions.push({
+        fieldLabel: null,
+        field: null,
+        value: part,
+        valid: true,
+      });
+    }
+  });
+
+  return conditions;
+};
+
+// 处理查询 - 采用query.vue的实现
+const handleSearch = () => {
+  if (!currentInput.value.trim()) return;
+
+  // 解析条件
+  parsedConditions.value = parseConditions(currentInput.value);
+
+  // 执行过滤，创建副本并添加selected属性
+  filteredData.value = filterData(parsedConditions.value).map((item) => ({
+    ...item,
+    selected: false,
+  }));
+
+  // 显示结果
+  showResults.value = true;
+
+  // 隐藏建议
+  showSuggestions.value = false;
+  possibleFields.value = [];
+};
+
+// 根据条件过滤数据
+const filterData = (conditions) => {
+  return mockData.filter((item) => {
+    return conditions.every((condition) => {
+      if (!condition.valid) return false;
+
+      // 如果指定了字段
+      if (condition.field) {
+        const fieldValue = item[condition.field];
+        return checkCondition(fieldValue, condition.value);
+      }
+      // 没有指定字段，检查所有字段
+      else {
+        return allFields.some((field) => {
+          const fieldValue = item[field.key];
+          return checkCondition(fieldValue, condition.value);
+        });
+      }
+    });
+  });
+};
+
+// 检查单个条件
+const checkCondition = (fieldValue, conditionValue) => {
+  // 支持的运算符
+  const operators = [
+    { symbol: ">=", func: (a, b) => a >= b },
+    { symbol: "<=", func: (a, b) => a <= b },
+    { symbol: "!=", func: (a, b) => a != b },
+    { symbol: ">", func: (a, b) => a > b },
+    { symbol: "<", func: (a, b) => a < b },
+    { symbol: "=", func: (a, b) => a == b },
+  ];
+
+  // 查找是否使用了运算符
+  for (const op of operators) {
+    if (conditionValue.startsWith(op.symbol)) {
+      const value = conditionValue.substring(op.symbol.length).trim();
+      // 尝试转换为数字进行比较
+      if (!isNaN(Number(fieldValue)) && !isNaN(Number(value))) {
+        return op.func(Number(fieldValue), Number(value));
+      }
+      // 字符串比较
+      return op.func(String(fieldValue), value);
+    }
+  }
+
+  // 没有运算符，默认包含即可
+  return String(fieldValue)
+    .toLowerCase()
+    .includes(conditionValue.toLowerCase());
+};
+
+// 移除单个条件
+const removeCondition = (index) => {
+  const parts = currentInput.value.split(";");
+  parts.splice(index, 1);
+  currentInput.value = parts.join(";").replace(/;;+/g, ";").trim();
+  parsedConditions.value = parseConditions(currentInput.value);
+  filteredData.value = filterData(parsedConditions.value).map((item) => ({
+    ...item,
+    selected: false,
+  }));
+
+  // 重置选中的条件索引
+  if (selectedConditionIndex.value === index) {
+    selectedConditionIndex.value = -1;
+  }
+};
+
+// 清除所有查询条件和结果
+const clearAll = () => {
+  currentInput.value = "";
+  parsedConditions.value = [];
+  filteredData.value = [];
+  showResults.value = false;
+  showSuggestions.value = false;
+  possibleFields.value = [];
+  selectedConditionIndex.value = -1;
+  if (searchInput.value) {
+    searchInput.value.focus();
+  }
+};
+
+// 保留step2的原有生命周期钩子
 onMounted(() => {
+  initializeValues();
+  updateInputWidth();
+  window.addEventListener("resize", updateInputWidth);
+
+  // 自动聚焦输入框
+  setTimeout(() => {
+    if (searchInput.value) {
+      searchInput.value.focus();
+    }
+  }, 100);
+
+  // 点击页面其他地方隐藏建议
+  document.addEventListener("click", (e) => {
+    if (
+      !e.target.closest(".search-box") &&
+      !e.target.closest(".suggestions-dropdown")
+    ) {
+      showSuggestions.value = false;
+    }
+  });
+
   // 只有已选车型才自动查询，否则等待用户选择
   if (props.form.selectedCarType) {
-    onQuery();
+    // 使用新的查询方式，自动填充车型条件
+    currentInput.value = `车型:${props.form.selectedCarType}`;
+    setTimeout(() => {
+      handleSearch();
+    }, 100);
   }
 });
 
-function selectCarType(val) {
-  selectedCarTypeProxy.value = val;
-}
+// 监听输入框宽度变化
+const updateInputWidth = () => {
+  if (searchInput.value) {
+    inputWidth.value = searchInput.value.$el.clientWidth;
+  }
+};
 
-const queryResultList = ref([]);
-function onQuery() {
-  queryResultList.value = allParts
-    .filter((item) => {
-      // 车型过滤
-      if (
-        selectedCarTypeProxy.value &&
-        item.carType !== selectedCarTypeProxy.value
-      )
-        return false;
-
-      // 车轴
-      if (item.type === "车轴") {
-        if (paramAxle.value === "不限") return true;
-        return item.feature.includes(paramAxle.value);
-      }
-      // 齿轮箱
-      if (item.type === "齿轮箱") {
-        if (paramGearbox.value === "不限") return true;
-        return item.feature.includes(paramGearbox.value);
-      }
-      // 车轮
-      if (item.type === "车轮") {
-        if (paramWheel.value === "不限") return true;
-        return item.feature.includes(paramWheel.value);
-      }
-      // 制动盘
-      if (item.type === "制动盘") {
-        if (paramBrake.value === "不限") return true;
-        return item.feature.includes(paramBrake.value);
-      }
-      // 其它类型不显示
-      return false;
-    })
-    .map((item) => ({ ...item, selected: false }));
-}
-
-const compareDialogVisible = ref(false);
-const selectedCompareList = computed(() =>
-  queryResultList.value.filter((i) => i.selected)
+// 监听输入框宽度变化
+watch(
+  () => currentInput.value,
+  () => {
+    // 延迟更新，确保DOM已更新
+    setTimeout(() => {
+      updateInputWidth();
+    }, 0);
+  }
 );
-// compareTableData 直接从stepMockData.js导入，无需本地定义
+
+// 保留step2的原有功能方法
+function toggleSelect(item) {
+  // 统计已选中的数量
+  const selectedCount = filteredData.value.filter((i) => i.selected).length;
+  if (!item.selected && selectedCount >= 3) {
+    ElMessage.warning("最多只能选择3个卡片进行对比");
+    return;
+  }
+  item.selected = !item.selected;
+}
+
 function onCompare() {
   if (selectedCompareList.value.length === 0) {
     ElMessage.warning("请先选择要对比的卡片");
@@ -279,18 +1305,8 @@ function onCompare() {
   compareDialogVisible.value = true;
 }
 
-function toggleSelect(item) {
-  // 统计已选中的数量
-  const selectedCount = queryResultList.value.filter((i) => i.selected).length;
-  if (!item.selected && selectedCount >= 3) {
-    ElMessage.warning("最多只能选择3个卡片进行对比");
-    return;
-  }
-  item.selected = !item.selected;
-}
-
 function onNextStep() {
-  const selected = queryResultList.value.filter((i) => i.selected);
+  const selected = filteredData.value.filter((i) => i.selected);
   if (selected.length !== 1) {
     ElMessage.warning("请且只能选择一个卡片进入下一步");
     return;
@@ -299,86 +1315,20 @@ function onNextStep() {
   if (props.form) {
     props.form.selectedCarType = selectedCarTypeProxy.value;
     props.form.selectedPartInfo = {
-      code: selected[0].code,
-      label: selected[0].label,
+      code: selected[0].productNumber,
+      label: selected[0].name,
       image: selected[0].image,
-      type: selected[0].type,
-      feature: selected[0].feature,
+      type: selected[0].model,
+      feature: selected[0].specificationModel,
     };
     emit("update:form", props.form);
   }
   emit("next-step");
 }
-
-// 智能模糊建议方法
-function queryAxleSuggestions(queryString, cb) {
-  const results = allParts
-    .filter(
-      (item) =>
-        item.type === "车轴" &&
-        item.carType === selectedCarTypeProxy.value &&
-        item.feature.includes(queryString)
-    )
-    .map((item) => ({ value: item.feature }));
-  // 增加'不限'选项
-  cb([
-    { value: "不限" },
-    ...results.filter(
-      (r, i, arr) => arr.findIndex((x) => x.value === r.value) === i
-    ),
-  ]);
-}
-function queryGearboxSuggestions(queryString, cb) {
-  const results = allParts
-    .filter(
-      (item) =>
-        item.type === "齿轮箱" &&
-        item.carType === selectedCarTypeProxy.value &&
-        item.feature.includes(queryString)
-    )
-    .map((item) => ({ value: item.feature }));
-  cb([
-    { value: "不限" },
-    ...results.filter(
-      (r, i, arr) => arr.findIndex((x) => x.value === r.value) === i
-    ),
-  ]);
-}
-function queryWheelSuggestions(queryString, cb) {
-  const results = allParts
-    .filter(
-      (item) =>
-        item.type === "车轮" &&
-        item.carType === selectedCarTypeProxy.value &&
-        item.feature.includes(queryString)
-    )
-    .map((item) => ({ value: item.feature }));
-  cb([
-    { value: "不限" },
-    ...results.filter(
-      (r, i, arr) => arr.findIndex((x) => x.value === r.value) === i
-    ),
-  ]);
-}
-function queryBrakeSuggestions(queryString, cb) {
-  const results = allParts
-    .filter(
-      (item) =>
-        item.type === "制动盘" &&
-        item.carType === selectedCarTypeProxy.value &&
-        item.feature.includes(queryString)
-    )
-    .map((item) => ({ value: item.feature }));
-  cb([
-    { value: "不限" },
-    ...results.filter(
-      (r, i, arr) => arr.findIndex((x) => x.value === r.value) === i
-    ),
-  ]);
-}
 </script>
 
 <style scoped lang="scss">
+// 保留step2的原有样式
 .step2-container {
   background: #fff;
   padding: 24px;
@@ -879,4 +1829,215 @@ function queryBrakeSuggestions(queryString, cb) {
 :deep(.el-table th.param-col) {
   background: #f5f7fa !important;
 }
-</style>
\ No newline at end of file
+
+// 从query.vue整合的样式
+.search-box-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.custom-input-wrapper {
+  position: relative;
+  flex-grow: 1;
+}
+
+.main-input {
+  width: 100%;
+  min-width: 300px;
+  font-size: 16px;
+}
+
+.search-button {
+  white-space: nowrap;
+}
+
+.suggestions-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  margin-top: 5px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+/* 可能的字段部分样式 */
+.possible-fields-section {
+  border-bottom: 1px solid #e4e7ed;
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+}
+
+.possible-fields-header {
+  padding: 8px 15px;
+  font-size: 14px;
+  color: #666;
+  background-color: #f5f7fa;
+}
+
+.possible-field-item {
+  padding: 10px 15px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.possible-field-item:hover,
+.possible-field-item.active {
+  background-color: #f0f7ff;
+  color: #1890ff;
+}
+
+.hint-item {
+  padding: 10px 15px;
+  background-color: #f0f7ff;
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #1890ff;
+}
+
+.hint-icon {
+  font-size: 14px;
+}
+
+.suggestion-item {
+  padding: 10px 15px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.suggestion-item:hover,
+.suggestion-item.active {
+  background-color: #f5f7fa;
+}
+
+.field-type,
+.value-type {
+  display: inline-block;
+  width: 50px;
+  font-size: 12px;
+  color: #909399;
+}
+
+.field-hint {
+  color: #909399;
+}
+
+.conditions-tags {
+  margin: 15px 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.condition-tag {
+  cursor: pointer;
+  transition: all 0.2s;
+  padding-right: 30px !important;
+  position: relative;
+}
+
+.condition-tag:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.tag-field {
+  font-weight: 500;
+}
+
+.tag-value {
+  color: #409eff; /* 突出显示可更改的值 */
+  margin-right: 5px;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.tag-value:hover {
+  color: #1890ff;
+}
+
+.tag-edit-icon {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #409eff;
+  opacity: 0.7;
+}
+
+.results-section {
+  margin-top: 30px;
+  overflow: hidden;
+}
+
+.results-table {
+  width: 100%;
+}
+
+.no-results {
+  padding: 50px 0;
+  text-align: center;
+}
+
+.clear-button {
+  color: #666;
+}
+
+.result-card-spec {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.result-card-car-model {
+  font-size: 12px;
+  color: #666;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.compare-table-wrap {
+  margin-top: 16px;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+@media (max-width: 768px) {
+  .search-box {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .main-input {
+    min-width: auto;
+  }
+
+  .search-button {
+    width: 100%;
+  }
+
+  .result-card {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/order/intention/query.vue b/src/views/order/intention/query.vue
index 56e9580..26691e9 100644
--- a/src/views/order/intention/query.vue
+++ b/src/views/order/intention/query.vue
@@ -117,33 +117,144 @@
     <!-- 查询结果区域 -->
     <div class="results-section" v-if="showResults">
       <div class="results-header">
-        <h2>查询结果</h2>
+        <h2>查询结果 ({{ filteredData.length }})</h2>
         <el-button type="text" @click="clearAll" class="clear-button">
           <el-icon><RefreshLeft /></el-icon>
           清除所有
         </el-button>
       </div>
 
-      <el-table :data="filteredData" border class="results-table">
-        <el-table-column
-          v-for="field in allFields"
-          :key="field.key"
-          :prop="field.key"
-          :label="field.label"
-          sortable
-        />
-      </el-table>
+      <!-- 结果卡片区 -->
+      <div
+        v-if="filteredData.length"
+        class="result-card-list-wrap"
+        style="position: relative"
+      >
+        <el-button
+          v-if="selectedCompareList.length > 0"
+          type="warning"
+          class="compare-btn-float"
+          @click="onCompare"
+          circle
+        >
+          参数<br />对比
+        </el-button>
+        <div class="result-card-list">
+          <el-card
+            v-for="item in filteredData"
+            :key="item.productNumber"
+            class="result-card"
+            :class="{ active: item.selected }"
+            @click="toggleSelect(item)"
+          >
+            <div class="result-card-checkbox-wrap" @click.stop>
+              <el-checkbox
+                v-model="item.selected"
+                class="result-card-checkbox"
+              />
+            </div>
+            <img
+              :src="item.image"
+              class="result-card-img"
+              :alt="item.name"
+              @click.stop="toggleSelect(item)"
+            />
+            <div class="result-card-info">
+              <div class="result-card-name">{{ item.name }}</div>
+              <div class="result-card-code">{{ item.productNumber }}</div>
+              <div class="result-card-spec">{{ item.specificationModel }}</div>
+              <div class="result-card-car-model">
+                适用车型: {{ item.carModel }}
+              </div>
+            </div>
+          </el-card>
+        </div>
+      </div>
 
       <div v-if="filteredData.length === 0" class="no-results">
         <el-empty description="没有匹配的结果"></el-empty>
       </div>
     </div>
+
+    <!-- 参数对比弹窗 -->
+    <el-dialog
+      v-model="compareDialogVisible"
+      title="参数对比"
+      width="80%"
+      top="40px"
+      :close-on-click-modal="false"
+    >
+      <!-- 表格对比区，图片放在表头下方 -->
+      <div class="compare-table-wrap">
+        <el-table :data="compareTableData" border style="width: 100%">
+          <el-table-column
+            prop="param"
+            label="参数"
+            width="180"
+            class-name="param-col"
+            align="center"
+            header-align="center"
+          />
+          <el-table-column
+            v-for="item in selectedCompareList"
+            :key="item.productNumber"
+            :label="item.productNumber"
+            :prop="item.productNumber"
+            align="center"
+            header-align="center"
+          >
+            <template #header="{ column }">
+              <div
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                "
+              >
+                <img
+                  v-if="
+                    selectedCompareList.find(
+                      (i) => i.productNumber === column.label
+                    )?.image
+                  "
+                  :src="
+                    selectedCompareList.find(
+                      (i) => i.productNumber === column.label
+                    ).image
+                  "
+                  style="
+                    width: 60px;
+                    height: 40px;
+                    object-fit: contain;
+                    margin-top: 4px;
+                    border-radius: 4px;
+                    border: 1px solid #eee;
+                  "
+                  :alt="
+                    selectedCompareList.find(
+                      (i) => i.productNumber === column.label
+                    ).name
+                  "
+                />
+                <span>{{ column.label }}</span>
+                <span style="font-size: 12px; color: #666">{{
+                  selectedCompareList.find(
+                    (i) => i.productNumber === column.label
+                  ).name
+                }}</span>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 
 <script setup>
 import { ref, onMounted, watch, nextTick } from "vue";
+import { Search, RefreshLeft, Edit } from "@element-plus/icons-vue";
 
 // 定义可查询的字段
 const allFields = [
@@ -174,6 +285,7 @@ const mockData = [
     wheelTread: null,
     paintManufacturer: "Weckerle",
     image: "/images/cars/1_1_1.jpg",
+    selected: false,
   },
   {
     productNumber: "D311299000044-00005",
@@ -187,6 +299,7 @@ const mockData = [
     wheelTread: null,
     paintManufacturer: "Weckerle",
     image: "/images/cars/1_1_2.jpg",
+    selected: false,
   },
   {
     productNumber: "D311102000025-00022",
@@ -200,6 +313,7 @@ const mockData = [
     wheelTread: "LMB10",
     paintManufacturer: "Weckerle",
     image: "/images/cars/1_2_1.jpg",
+    selected: false,
   },
   {
     productNumber: "D311102000025-00021",
@@ -213,6 +327,7 @@ const mockData = [
     wheelTread: "LMB10",
     paintManufacturer: "Weckerle",
     image: "/images/cars/1_2.jpg",
+    selected: false,
   },
   {
     productNumber: "D311199000035-00037",
@@ -226,6 +341,7 @@ const mockData = [
     wheelTread: "LMB10",
     paintManufacturer: "Weckerle",
     image: "/images/cars/1_2_1_1.jpg",
+    selected: false,
   },
   {
     productNumber: "D311199020097-00006",
@@ -239,6 +355,7 @@ const mockData = [
     wheelTread: "LMB10",
     paintManufacturer: "Weckerle",
     image: "/images/cars/2.jpg",
+    selected: false,
   },
   {
     productNumber: "D311102010007-00037",
@@ -252,6 +369,7 @@ const mockData = [
     wheelTread: "LMB10",
     paintManufacturer: null,
     image: "/images/cars/3.jpg",
+    selected: false,
   },
   {
     productNumber: "D325000000014-10001",
@@ -265,6 +383,7 @@ const mockData = [
     wheelTread: null,
     paintManufacturer: null,
     image: "/images/cars/4.jpg",
+    selected: false,
   },
 ];
 
@@ -364,6 +483,54 @@ const parsedConditions = ref([]);
 const showResults = ref(false);
 const filteredData = ref([]);
 
+// 对比相关
+const compareDialogVisible = ref(false);
+const selectedCompareList = computed(() =>
+  filteredData.value.filter((i) => i.selected)
+);
+
+// 生成对比表格数据
+const compareTableData = computed(() => {
+  if (selectedCompareList.value.length <= 1) return [];
+
+  // 需要对比的参数列表
+  const paramsToCompare = [
+    "品名/物料名称",
+    "品号",
+    "图号",
+    "品号-规格型号",
+    "车型",
+    "型号",
+    "材质",
+    "采购属性",
+    "车轮踏面形式",
+    "油漆制造商",
+  ];
+
+  // 字段映射关系
+  const fieldMap = {
+    "品名/物料名称": "name",
+    品号: "productNumber",
+    图号: "drawingNumber",
+    "品号-规格型号": "specificationModel",
+    车型: "carModel",
+    型号: "model",
+    材质: "material",
+    采购属性: "procurementAttributes",
+    车轮踏面形式: "wheelTread",
+    油漆制造商: "paintManufacturer",
+  };
+
+  // 构建对比数据
+  return paramsToCompare.map((param) => {
+    const row = { param };
+    selectedCompareList.value.forEach((item) => {
+      row[item.productNumber] = item[fieldMap[param]] || "-";
+    });
+    return row;
+  });
+});
+
 // 获取当前正在输入的部分
 const getCurrentInputPart = () => {
   const parts = currentInput.value.split(";");
@@ -922,8 +1089,11 @@ const handleSearch = () => {
   // 解析条件
   parsedConditions.value = parseConditions(currentInput.value);
 
-  // 执行过滤
-  filteredData.value = filterData(parsedConditions.value);
+  // 执行过滤，创建副本并添加selected属性
+  filteredData.value = filterData(parsedConditions.value).map((item) => ({
+    ...item,
+    selected: false,
+  }));
 
   // 显示结果
   showResults.value = true;
@@ -992,7 +1162,10 @@ const removeCondition = (index) => {
   parts.splice(index, 1);
   currentInput.value = parts.join(";").replace(/;;+/g, ";").trim();
   parsedConditions.value = parseConditions(currentInput.value);
-  filteredData.value = filterData(parsedConditions.value);
+  filteredData.value = filterData(parsedConditions.value).map((item) => ({
+    ...item,
+    selected: false,
+  }));
 
   // 重置选中的条件索引
   if (selectedConditionIndex.value === index) {
@@ -1012,6 +1185,27 @@ const clearAll = () => {
   searchInput.value.focus();
 };
 
+// 切换卡片选择状态
+const toggleSelect = (item) => {
+  // 统计已选中的数量
+  const selectedCount = filteredData.value.filter((i) => i.selected).length;
+  if (!item.selected && selectedCount >= 3) {
+    // 提示最多只能选择3个
+    alert("最多只能选择3个卡片进行对比");
+    return;
+  }
+  item.selected = !item.selected;
+};
+
+// 打开对比弹窗
+const onCompare = () => {
+  if (selectedCompareList.value.length === 0) {
+    alert("请先选择要对比的卡片");
+    return;
+  }
+  compareDialogVisible.value = true;
+};
+
 // 监听输入框宽度变化
 const updateInputWidth = () => {
   if (searchInput.value) {
@@ -1256,6 +1450,150 @@ watch(
   color: #666;
 }
 
+/* 卡片样式 - 与step2保持一致 */
+.result-card-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin: 24px;
+}
+
+.result-card {
+  width: 220px;
+  position: relative;
+  padding-top: 16px;
+  box-sizing: border-box;
+  transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
+  cursor: pointer;
+  border: 1px solid #eee;
+}
+
+.result-card:hover {
+  box-shadow: 0 4px 16px rgba(33, 86, 243, 0.12);
+  transform: translateY(-4px) scale(1.03);
+  border-color: #2156f3;
+}
+
+.result-card.active {
+  box-shadow: 0 6px 20px rgba(33, 86, 243, 0.18);
+  border-color: #2156f3;
+  background: #f5f8ff;
+  transform: scale(1.04);
+}
+
+.result-card-checkbox-wrap {
+  position: absolute;
+  left: 20px;
+  top: 22px;
+  z-index: 2;
+}
+
+.result-card-checkbox {
+  position: static;
+}
+
+.result-card-img {
+  width: 100%;
+  height: 120px;
+  object-fit: contain;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  margin-bottom: 12px;
+  transition: transform 0.2s;
+}
+
+.result-card:hover .result-card-img,
+.result-card.active .result-card-img {
+  transform: scale(1.08);
+}
+
+.result-card-info {
+  text-align: left;
+  padding: 0 16px 16px;
+}
+
+.result-card-name {
+  font-size: 15px;
+  color: #333;
+  font-weight: 500;
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.result-card-code {
+  font-size: 13px;
+  color: #888;
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.result-card-spec {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.result-card-car-model {
+  font-size: 12px;
+  color: #666;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.result-card-list-wrap {
+  position: relative;
+}
+
+.compare-btn-float {
+  position: sticky;
+  float: right;
+  right: 20px;
+  top: 20px;
+  z-index: 10;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(33, 86, 243, 0.12);
+  transition: box-shadow 0.2s, background 0.2s;
+  font-size: 14px;
+  margin: 10px 20px 0 0;
+}
+
+.compare-btn-float:hover {
+  background: #ffe9c6;
+  color: #999;
+  box-shadow: 0 4px 16px rgba(255, 153, 0, 0.18);
+}
+
+.compare-table-wrap {
+  margin-top: 16px;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+/* 参数对比表格第一列背景色与表头一致 */
+:deep(.el-table .param-col),
+:deep(.el-table th.param-col) {
+  background: #f5f7fa !important;
+}
+
+.result-card-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
+  border-color: #2156f3 !important;
+  background-color: #2156f3 !important;
+}
+
 @media (max-width: 768px) {
   .search-box {
     flex-direction: column;
@@ -1269,5 +1607,9 @@ watch(
   .search-button {
     width: 100%;
   }
+
+  .result-card {
+    width: 100%;
+  }
 }
 </style>