From a8e35a7eee8d815291ce33c6e889bc75cf3bb5f6 Mon Sep 17 00:00:00 2001
From: JenniferW <1627055433@qq.com>
Date: Thu, 14 Aug 2025 14:11:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AD=A5=E9=AA=A4=E4=BA=8C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/order/intention/Step2 copy.vue | 1001 +++++++++++++++++
 src/views/order/intention/index copy.vue |  427 +++++++
 src/views/order/intention/query copy.vue | 1292 ++++++++++++++++++++++
 src/views/order/intention/query.vue      | 1273 +++++++++++++++++++++
 4 files changed, 3993 insertions(+)
 create mode 100644 src/views/order/intention/Step2 copy.vue
 create mode 100644 src/views/order/intention/index copy.vue
 create mode 100644 src/views/order/intention/query copy.vue
 create mode 100644 src/views/order/intention/query.vue

diff --git a/src/views/order/intention/Step2 copy.vue b/src/views/order/intention/Step2 copy.vue
new file mode 100644
index 0000000..973aa03
--- /dev/null
+++ b/src/views/order/intention/Step2 copy.vue	
@@ -0,0 +1,1001 @@
+<template>
+  <div class="step2-container">
+    <div class="main-row">
+      <div class="right-content">
+        <div>
+          <!-- 查询条件区：Tab切换 -->
+          <el-tabs
+            v-model="activeTab"
+            class="query-tabs"
+            @tab-change="handleTabChange"
+          >
+            <!-- 商品查询Tab -->
+            <el-tab-pane label="商品查询" name="product">
+              <div class="query-container">
+                <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"
+                    >
+                      <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>
+            </el-tab-pane>
+
+            <!-- 语义查询Tab -->
+            <el-tab-pane label="语义查询" name="semantic">
+              <div class="query-container">
+                <el-input
+                  v-model="semanticQuery"
+                  type="textarea"
+                  :rows="4"
+                  placeholder="请描述您的具体需求(比如用途、偏好等)，我们将为您筛选最合适的商品"
+                  class="semantic-input"
+                />
+                <div class="semantic-query-btn">
+                  <el-button type="primary" @click="onSemanticQuery"
+                    >查询</el-button
+                  >
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+
+          <!-- 查询结果卡片区 -->
+          <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)"
+                />
+                <div class="result-card-info">
+                  <div class="result-card-name">{{ item.label }}</div>
+                  <div class="result-card-code">{{ item.code }}</div>
+                </div>
+              </el-card>
+            </div>
+          </div>
+
+          <!-- 参数对比弹窗 -->
+          <el-dialog
+            v-model="compareDialogVisible"
+            title="参数对比"
+            width="60%"
+            top="40px"
+            :close-on-click-modal="false"
+          >
+            <!-- 表格对比区，图片放在表头下方 -->
+            <div class="compare-table-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.code"
+                  :label="item.code"
+                  :prop="item.code"
+                  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.code === column.label
+                          )?.image
+                        "
+                        :src="
+                          selectedCompareList.find(
+                            (i) => i.code === column.label
+                          ).image
+                        "
+                        style="
+                          width: 60px;
+                          height: 40px;
+                          object-fit: contain;
+                          margin-top: 4px;
+                          border-radius: 4px;
+                          border: 1px solid #eee;
+                        "
+                      />
+                      <span>{{ column.label }}</span>
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-dialog>
+        </div>
+        <div class="btn-row">
+          <el-button @click="emit('prev-step')">上一步</el-button>
+          <el-button type="primary" @click="onNextStep">下一步</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 车型信息弹窗 -->
+    <car-model-dialog
+      v-model="carModelDialogVisible"
+      :car-model="selectedCarModel"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue";
+import {
+  carTypeOptions,
+  allParts,
+  compareTableData,
+} from "@/data/stepMockData";
+import CarModelDialog from "@/components/CarModelDialog.vue";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  form: Object,
+  selectedCarType: String,
+});
+const emit = defineEmits(["update:form", "prev-step", "next-step"]);
+
+const carModelDialogVisible = ref(false);
+const selectedCarModel = ref(null);
+
+// Tab切换相关
+const activeTab = ref("product"); // 默认显示商品查询
+
+// 彻底双向绑定
+const selectedCarTypeProxy = computed({
+  get() {
+    return props.form?.selectedCarType ?? "";
+  },
+  set(val) {
+    if (props.form) {
+      props.form.selectedCarType = val;
+      emit("update:form", props.form);
+    }
+  },
+});
+
+// 商品查询参数
+const paramAxle = ref("");
+const paramGearbox = ref("");
+const paramWheel = ref("");
+const paramBrake = ref("");
+
+// 语义查询参数
+const semanticQuery = ref("");
+
+onMounted(() => {
+  // 只有已选车型才自动查询，否则等待用户选择
+  if (props.form.selectedCarType) {
+    onQuery();
+  }
+});
+
+function selectCarType(val) {
+  selectedCarTypeProxy.value = val;
+}
+
+// 处理Tab切换
+function handleTabChange(tabName) {
+  // 可以在这里添加Tab切换时的逻辑
+  console.log("切换到:", tabName);
+}
+
+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 === "不限" || !paramAxle.value) return true;
+        return item.feature.includes(paramAxle.value);
+      }
+      // 齿轮箱
+      if (item.type === "齿轮箱") {
+        if (paramGearbox.value === "不限" || !paramGearbox.value) return true;
+        return item.feature.includes(paramGearbox.value);
+      }
+      // 车轮
+      if (item.type === "车轮") {
+        if (paramWheel.value === "不限" || !paramWheel.value) return true;
+        return item.feature.includes(paramWheel.value);
+      }
+      // 制动盘
+      if (item.type === "制动盘") {
+        if (paramBrake.value === "不限" || !paramBrake.value) return true;
+        return item.feature.includes(paramBrake.value);
+      }
+      // 其它类型不显示
+      return false;
+    })
+    .map((item) => ({ ...item, selected: false }));
+}
+
+// 语义查询
+function onSemanticQuery() {
+  if (!semanticQuery.value.trim()) {
+    ElMessage.warning("请输入您的查询需求");
+    return;
+  }
+
+  // 这里只是模拟语义查询，实际项目中应该调用后端API
+  // 简单匹配包含查询关键词的结果
+  const queryWords = semanticQuery.value.trim().toLowerCase();
+
+  queryResultList.value = allParts
+    .filter((item) => {
+      // 简单匹配逻辑：匹配名称、特征或类型中包含查询词
+      const matchName = item.label.toLowerCase().includes(queryWords);
+      const matchFeature = item.feature.toLowerCase().includes(queryWords);
+      const matchType = item.type.toLowerCase().includes(queryWords);
+
+      // 如果选择了车型，还要匹配车型
+      const matchCarType =
+        !selectedCarTypeProxy.value ||
+        item.carType === selectedCarTypeProxy.value;
+
+      return (matchName || matchFeature || matchType) && matchCarType;
+    })
+    .map((item) => ({ ...item, selected: false }));
+
+  if (queryResultList.value.length === 0) {
+    ElMessage.info("没有找到匹配的结果，请尝试其他关键词");
+  }
+}
+
+const compareDialogVisible = ref(false);
+const selectedCompareList = computed(() =>
+  queryResultList.value.filter((i) => i.selected)
+);
+// compareTableData 直接从stepMockData.js导入，无需本地定义
+function onCompare() {
+  if (selectedCompareList.value.length === 0) {
+    ElMessage.warning("请先选择要对比的卡片");
+    return;
+  }
+  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);
+  if (selected.length !== 1) {
+    ElMessage.warning("请且只能选择一个卡片进入下一步");
+    return;
+  }
+  // 写入form
+  if (props.form) {
+    props.form.selectedCarType = selectedCarTypeProxy.value;
+    props.form.selectedPartInfo = {
+      code: selected[0].code,
+      label: selected[0].label,
+      image: selected[0].image,
+      type: selected[0].type,
+      feature: selected[0].feature,
+    };
+    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-container {
+  background: #fff;
+  padding: 24px;
+  border-radius: 8px;
+}
+.main-row {
+  display: flex;
+  align-items: flex-start;
+}
+.right-content {
+  flex: 1;
+}
+
+// Tab查询相关样式
+.query-tabs {
+  margin-bottom: 20px;
+}
+
+:deep(.el-tabs__header) {
+  margin: 0;
+}
+
+// 统一的查询容器样式 - 确保两个Tab内容框大小一致
+.query-container {
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease;
+  min-height: 180px; /* 固定最小高度，确保两个框大小一致 */
+  box-sizing: border-box; /* 确保padding不影响整体尺寸 */
+}
+
+.query-container:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+// 商品查询表单样式
+.param-form-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center; /* 垂直居中对齐 */
+  gap: 24px 32px;
+  margin-bottom: 0;
+  position: relative;
+  height: 100%; /* 占满容器高度 */
+}
+.param-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 0;
+}
+.param-label {
+  font-size: 14px;
+  color: #666;
+  min-width: 60px;
+  text-align: right;
+}
+.param-input {
+  width: 180px;
+}
+.param-form-btns {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  margin-left: auto;
+  min-width: 200px;
+}
+.param-btn {
+  min-width: 90px;
+}
+
+// 语义查询样式 - 移除输入框边框
+.semantic-input {
+  width: 100%;
+  margin-bottom: 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  min-height: 120px;
+  resize: none; /* 禁止调整大小 */
+}
+
+// 关键：移除语义查询输入框的边框和阴影
+:deep(.semantic-input .el-textarea__inner) {
+  border: none !important;
+  box-shadow: none !important;
+  padding: 10px 0; /* 调整内边距 */
+  line-height: 1.6;
+}
+
+// 聚焦时也不显示边框
+:deep(.semantic-input .el-textarea__inner:focus) {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.semantic-query-btn {
+  text-align: right;
+  margin-top: 16px; /* 增加距离，确保整体高度一致 */
+}
+
+// 结果卡片样式
+.result-card-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin-top: 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;
+}
+.result-card-name {
+  font-size: 15px;
+  color: #333;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+.result-card-code {
+  font-size: 13px;
+  color: #888;
+}
+
+// 对比按钮和弹窗样式
+.compare-btn-float {
+  position: absolute;
+  right: 20px;
+  top: 170px;
+  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;
+}
+.compare-btn-float:hover {
+  background: #ffe9c6;
+  color: #999;
+  box-shadow: 0 4px 16px rgba(255, 153, 0, 0.18);
+}
+.result-card-list-wrap {
+  position: relative;
+}
+.compare-table-wrap {
+  margin-top: 16px;
+}
+:deep(.el-table .param-col),
+:deep(.el-table th.param-col) {
+  background: #f5f7fa !important;
+}
+
+// 按钮行样式
+.btn-row {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+// 其他样式
+.step {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.step-left {
+  flex: 1;
+  margin-right: 10px;
+}
+.step-title {
+  font-size: 18px;
+  margin: 15px 0;
+  color: #333;
+  font-weight: 500;
+
+  &.active {
+    color: #2156f3;
+  }
+
+  .reference-model {
+    font-size: 14px;
+    color: #666;
+    margin-top: 8px;
+    padding-left: 20px;
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 12px;
+      height: 12px;
+      background: #2156f3;
+      border-radius: 50%;
+    }
+  }
+}
+.image-box.right-align {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  margin-bottom: 16px;
+}
+.table-title {
+  font-weight: bold;
+  margin: 16px 0 8px 0;
+  color: #333;
+}
+.tree-table-row {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #bbb;
+  border-radius: 4px;
+  padding: 12px;
+  background: #fff;
+}
+.header-title {
+  flex: 1;
+  padding: 10px;
+  border-radius: 4px;
+}
+.header-code,
+.header-name {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 5px;
+}
+.tab-container {
+  width: 100%;
+}
+.tab-header {
+  background: #f5f7fa;
+  border-radius: 4px;
+  padding: 16px;
+  margin-bottom: 20px;
+}
+.tab-header-item {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+.tab-header-image {
+  width: 200px;
+  height: 150px;
+  flex-shrink: 0;
+}
+.tab-header-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.tab-header-code,
+.tab-header-name {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+}
+.part-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+  border: 1px solid #eee;
+}
+.model-form {
+  max-width: 900px;
+  margin-top: 16px;
+}
+.main-img {
+  width: 580px;
+  height: 260px;
+  object-fit: contain;
+  border-radius: 8px;
+  border: 1px solid #eee;
+}
+.custom-tab-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.tab-label-image {
+  width: 80px;
+  height: 60px;
+  margin-bottom: 8px;
+}
+
+.tab-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+  border: 1px solid #eee;
+}
+
+.tab-label-info {
+  text-align: center;
+}
+
+.tab-label-code {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.tab-label-name {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+:deep(.el-tabs__item) {
+  height: auto !important;
+  padding: 0 20px !important;
+}
+
+:deep(.el-tabs__nav) {
+  display: flex;
+  gap: 20px;
+}
+
+:deep(.el-tabs__item.is-active) {
+  .tab-label-code,
+  .tab-label-name {
+    color: var(--el-color-primary);
+  }
+}
+
+.tree-node {
+  transition: background 0.2s;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tree-node.active {
+  color: #2156f3;
+}
+.tree-node:hover {
+  color: #2156f3;
+}
+.tab-content-flex {
+  display: flex;
+  min-height: 300px;
+  height: 400px;
+  max-height: 400px;
+  overflow: hidden;
+}
+.tab-left {
+  width: 260px;
+  border-right: 1px solid #eee;
+  padding-right: 16px;
+  overflow-y: auto;
+  height: 100%;
+}
+.tab-right {
+  flex: 1;
+  padding-left: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+  height: 100%;
+}
+.right-button {
+  margin: 15px 0 0 260px;
+}
+.detail-img {
+  width: 180px;
+  height: 120px;
+  object-fit: contain;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  margin-bottom: 16px;
+}
+.replace-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.replace-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.replace-item.selected {
+  border-color: #2156f3;
+}
+.replace-img {
+  width: 80px;
+  height: 60px;
+  object-fit: contain;
+  border-radius: 4px;
+  border: 1px solid #eee;
+}
+.no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  color: #999;
+  font-size: 18px;
+}
+
+// 新增样式
+:deep(.el-collapse-item.is-disabled .el-collapse-item__header) {
+  cursor: default;
+  color: #303133;
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+:deep(.el-collapse-item.is-disabled .el-collapse-item__arrow) {
+  display: none;
+}
+
+:deep(.el-collapse-item__header) {
+  padding: 0;
+  height: auto;
+}
+
+:deep(.el-collapse-item__content) {
+  padding: 0;
+  padding-left: 16px;
+}
+
+:deep(.el-collapse-item__wrap) {
+  border-bottom: none;
+}
+
+.search-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.search-label {
+  font-size: 15px;
+  color: #666;
+  margin-right: 8px;
+}
+.car-type-text-list {
+  display: flex;
+  gap: 32px;
+}
+.car-type-text {
+  font-size: 16px;
+  color: #333;
+  cursor: pointer;
+  padding: 0 4px 4px 4px;
+  border-bottom: 2px solid transparent;
+  transition: color 0.2s, border 0.2s;
+}
+.car-type-text.active {
+  color: #2156f3;
+  border-bottom: 2px solid #2156f3;
+  font-weight: 500;
+}
+.search-divider {
+  border-bottom: 1px dashed #e5e5e5;
+  margin: 8px 0 16px 0;
+}
+.param-group-title {
+  font-size: 15px;
+  color: #333;
+  font-weight: 600;
+  margin: 12px 0 12px 0;
+}
+
+.result-card-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
+  border-color: #2156f3 !important;
+  background-color: #2156f3 !important;
+}
+</style>
diff --git a/src/views/order/intention/index copy.vue b/src/views/order/intention/index copy.vue
new file mode 100644
index 0000000..5e93ae5
--- /dev/null
+++ b/src/views/order/intention/index copy.vue	
@@ -0,0 +1,427 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="客户名称" prop="customerName">
+        <el-select
+          v-model="queryParams.customerName"
+          placeholder="请选择客户名称"
+          clearable
+          style="width: 240px"
+        >
+          <el-option
+            v-for="option in customerOptions.customerName"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-input
+          v-model="queryParams.createTime"
+          placeholder="请输入创建时间"
+          clearable
+          style="width: 240px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="经办人" prop="handler">
+        <el-input
+          v-model="queryParams.handler"
+          placeholder="请输入经办人"
+          clearable
+          style="width: 240px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['order:intention:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="View"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['order:intention:edit']"
+          >查看</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['order:intention:remove']"
+          >取消</el-button
+        >
+      </el-col>
+      <right-toolbar
+        v-model:showSearch="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="intentionList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="expand">
+        <template #default="props">
+          <div style="padding: 20px; border-left: 4px solid #409eff">
+            <p style="margin-top: 0; margin-bottom: 10px; font-weight: bold">
+              订单整体作业计划:
+            </p>
+            <ul style="list-style: none; padding: 0; margin: 0">
+              <li
+                v-for="(item, index) in props.row.workPlan"
+                :key="index"
+                style="margin-bottom: 10px"
+              >
+                <span
+                  :style="{
+                    fontWeight: 'bold',
+                    marginRight: '5px',
+                    color: isPastDate(item.date) ? '#409eff' : 'inherit',
+                  }"
+                >
+                  {{ index + 1 }}、{{ item.date }}:
+                </span>
+                <span
+                  :style="{
+                    color: isPastDate(item.date) ? '#409eff' : 'inherit',
+                  }"
+                >
+                  {{ item.description }}
+                </span>
+              </li>
+            </ul>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="订单商机名称" align="center" prop="orderName" />
+      <el-table-column label="客户名称" align="center" prop="customerName" />
+      <el-table-column label="类型" align="center" prop="type" />
+      <el-table-column
+        label="计划交付时间"
+        align="center"
+        prop="deliveryTime"
+        width="180"
+      />
+      <el-table-column label="当前状态" align="center" prop="currentStatus" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+      >
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="scope">
+          <el-button
+            type="text"
+            icon="View"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['order:intention:edit']"
+            >查看</el-button
+          >
+          <el-button
+            type="text"
+            icon="Delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['order:intention:remove']"
+            >取消</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或查看意向订单对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form
+        ref="intentionRef"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+      >
+        <el-form-item label="客户名称" prop="customerName">
+          <el-input v-model="form.customerName" placeholder="请输入客户名称" />
+        </el-form-item>
+        <el-form-item label="联系电话" prop="phone">
+          <el-input v-model="form.phone" placeholder="请输入联系电话" />
+        </el-form-item>
+        <el-form-item label="意向产品" prop="product">
+          <el-input v-model="form.product" placeholder="请输入意向产品" />
+        </el-form-item>
+        <el-form-item label="数量" prop="quantity">
+          <el-input-number v-model="form.quantity" :min="1" :max="999" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="form.status" placeholder="请选择状态">
+            <el-option
+              v-for="dict in statusOptions"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入内容"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Intention">
+import { ref, reactive, onMounted, watch } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { parseTime } from "@/utils/ruoyi";
+import { useRouter, useRoute } from "vue-router";
+import { mockData } from "@/mockData";
+import { statusOptions } from "@/data/commonMockData";
+import { customerOptions } from "@/data/stepMockData";
+
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const ids = ref([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 总条数
+const total = ref(0);
+// 意向订单表格数据
+const intentionList = ref([]);
+// 弹出层标题
+const title = ref("");
+// 是否显示弹出层
+const open = ref(false);
+
+const router = useRouter();
+const route = useRoute();
+
+// 查询参数
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  customerName: undefined,
+  createTime: undefined,
+  handler: undefined,
+});
+
+/** 查询意向订单列表 */
+function getList() {
+  loading.value = true;
+  // 模拟后端分页
+  const start = (queryParams.value.pageNum - 1) * queryParams.value.pageSize;
+  const end = start + queryParams.value.pageSize;
+  const filteredData = mockData.value.filter((item) => {
+    if (
+      queryParams.value.createTime &&
+      !item.createTime.includes(queryParams.value.createTime)
+    )
+      return false;
+    if (
+      queryParams.value.handler &&
+      !item.handler.includes(queryParams.value.handler)
+    )
+      return false;
+    if (
+      queryParams.value.customerName &&
+      item.customerName !== queryParams.value.customerName
+    )
+      return false;
+    return true;
+  });
+  intentionList.value = [];
+  intentionList.value = filteredData.slice(start, end);
+  total.value = filteredData.length;
+  loading.value = false;
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryParams.value = {
+    pageNum: 1,
+    pageSize: 10,
+    customerName: undefined,
+    createTime: undefined,
+    handler: undefined,
+  };
+  handleQuery();
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  // form.value = {
+  //   status: "0"
+  // }
+  // open.value = true
+  // title.value = "添加意向订单"
+  router.push("/order/create");
+}
+
+/** 查看按钮操作 */
+function handleUpdate(row) {
+  const id = row.id || ids.value[0];
+  // const intention = mockData.value.find(item => item.id === id)
+  // if (intention) {
+  //   form.value = { ...intention }
+  //   open.value = true
+  //   title.value = "查看意向订单"
+  // }
+  router.push({ path: "/order/create", query: { id: id } });
+}
+
+/** 提交按钮 */
+// function submitForm() {
+//   this.$refs["intentionRef"].validate(valid => {
+//     if (valid) {
+//       if (form.value.id != null) {
+//         // Edit operation
+//         const index = mockData.value.findIndex(item => item.id === form.value.id);
+//         if (index !== -1) {
+//           mockData.value[index] = { ...form.value };
+//           ElMessage.success("查看成功");
+//         }
+//       } else {
+//         // Add operation
+//         // Generate a simple unique ID (for static example purposes)
+//         const newId = mockData.value.length > 0 ? Math.max(...mockData.value.map(item => item.id)) + 1 : 1;
+//         mockData.value.push({ ...form.value, id: newId });
+//         ElMessage.success("新增成功");
+//       }
+//       open.value = false;
+//       getList();
+//     }
+//   });
+// }
+
+/** 取消按钮操作 */
+function handleDelete(row) {
+  const intentionType = row.type;
+  ElMessageBox.confirm("是否确认取消当前" + intentionType + "?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      // 模拟取消
+      mockData.value = mockData.value.filter(
+        (item) => !intentionIds.includes(item.id)
+      );
+      ids.value = []; // Clear selection after deletion
+      single.value = true;
+      multiple.value = true;
+      ElMessage.success("取消成功");
+      getList();
+    })
+    .catch(() => {}); // Catch cancel to avoid console error
+}
+
+/** 取消按钮 */
+// function cancel() {
+//   open.value = false
+//   reset()
+// }
+
+/** 表单重置 */
+// function reset() {
+//   form.value = {
+//     status: "0"
+//   }
+// }
+
+// Add isPastDate function
+function isPastDate(dateStr) {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const itemDate = new Date(dateStr);
+  itemDate.setHours(0, 0, 0, 0);
+  return itemDate <= today;
+}
+
+onMounted(() => {
+  getList();
+});
+
+// Watch for route changes to refresh list
+watch(
+  () => route.path,
+  (newPath) => {
+    if (newPath === "/order/intention") {
+      getList();
+    }
+  }
+);
+</script> 
\ No newline at end of file
diff --git a/src/views/order/intention/query copy.vue b/src/views/order/intention/query copy.vue
new file mode 100644
index 0000000..2f2340e
--- /dev/null
+++ b/src/views/order/intention/query copy.vue	
@@ -0,0 +1,1292 @@
+<template>
+  <div class="search-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1>多条件查询系统</h1>
+      <p>输入查询条件，支持字段名和值的智能匹配，多个条件用分号分隔</p>
+    </div>
+
+    <!-- 主查询区域 -->
+    <div class="search-box">
+      <div
+        class="custom-input-wrapper"
+        :style="{ width: inputWidth + 'px' }"
+        @click="handleInputContainerClick"
+      >
+        <el-input
+          v-model="currentInput"
+          ref="searchInput"
+          placeholder="输入查询条件，例如: 姓名:张三;年龄>25;..."
+          class="main-input"
+          @input="handleInput"
+          @keydown.enter="handleSearch"
+          @keydown.arrow-down="focusFirstSuggestion"
+          @keydown.escape="hideSuggestions"
+          @keydown="handleKeydown"
+          @click="handleInputClick"
+          @mouseup="handleInputMouseUp"
+        />
+      </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>
+
+        <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>
+    </div>
+
+    <!-- 查询结果区域 -->
+    <div class="results-section" v-if="showResults">
+      <div class="results-header">
+        <h2>查询结果</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 === 0" class="no-results">
+        <el-empty description="没有匹配的结果"></el-empty>
+      </div>
+    </div>
+
+    <!-- 使用帮助 -->
+    <div class="help-section">
+      <el-collapse>
+        <el-collapse-item title="使用帮助">
+          <div class="help-content">
+            <p>1. 输入字段名（如"名"）会自动提示匹配的字段（姓名、曾用名等）</p>
+            <p>2. 输入值（如"张"）会自动提示匹配的值及可能的所属字段</p>
+            <p>3. 多个条件之间用分号 ";" 分隔</p>
+            <p>4. 可以使用比较运算符: =, !=, >, <, >=, <=</p>
+            <p>5. 按 Enter 键或点击查询按钮执行查询</p>
+            <p>
+              6.
+              <span class="highlighted-text">蓝色值</span>
+              可以点击更换
+            </p>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+
+
+<script setup>
+import { ref, onMounted, watch, nextTick } from "vue";
+import { Search, RefreshLeft, InfoFilled, Edit } from "@element-plus/icons-vue";
+import {
+  ElInput,
+  ElButton,
+  ElTag,
+  ElTable,
+  ElTableColumn,
+  ElEmpty,
+  ElCollapse,
+  ElCollapseItem,
+  ElIcon,
+} from "element-plus";
+
+// 定义可查询的字段
+const allFields = [
+  { key: "name", label: "姓名" },
+  { key: "previousName", label: "曾用名" },
+  { key: "englishName", label: "英文名" },
+  { key: "age", label: "年龄" },
+  { key: "gender", label: "性别" },
+  { key: "department", label: "部门" },
+  { key: "position", label: "职位" },
+  { key: "hireDate", label: "入职日期" },
+  { key: "salary", label: "薪资" },
+  { key: "nationality", label: "民族" },
+  { key: "education", label: "学历" },
+  { key: "phone", label: "电话" },
+  { key: "address", label: "地址" },
+];
+
+// 模拟数据
+const mockData = [
+  {
+    name: "张三",
+    previousName: "张小三",
+    englishName: "Zhang San",
+    age: 28,
+    gender: "男",
+    department: "技术部",
+    position: "前端开发",
+    hireDate: "2020-03-15",
+    salary: 15000,
+    nationality: "汉族",
+    education: "本科",
+    phone: "13800138001",
+    address: "北京市海淀区",
+  },
+  {
+    name: "张四",
+    previousName: "张小四",
+    englishName: "Zhang Si",
+    age: 30,
+    gender: "男",
+    department: "技术部",
+    position: "全栈开发",
+    hireDate: "2019-05-20",
+    salary: 17000,
+    nationality: "汉族",
+    education: "硕士",
+    phone: "13800138002",
+    address: "北京市朝阳区",
+  },
+  {
+    name: "张五",
+    previousName: "",
+    englishName: "Zhang Wu",
+    age: 26,
+    gender: "女",
+    department: "人事部",
+    position: "HR专员",
+    hireDate: "2021-02-10",
+    salary: 11000,
+    nationality: "回族",
+    education: "本科",
+    phone: "13800138003",
+    address: "上海市静安区",
+  },
+  {
+    name: "张六",
+    previousName: "张六六",
+    englishName: "Zhang Liu",
+    age: 35,
+    gender: "男",
+    department: "财务部",
+    position: "财务经理",
+    hireDate: "2017-08-05",
+    salary: 22000,
+    nationality: "汉族",
+    education: "本科",
+    phone: "13800138004",
+    address: "广州市天河区",
+  },
+  {
+    name: "张七",
+    previousName: "张小七",
+    englishName: "Zhang Qi",
+    age: 29,
+    gender: "女",
+    department: "市场部",
+    position: "市场经理",
+    hireDate: "2019-11-18",
+    salary: 16000,
+    nationality: "满族",
+    education: "硕士",
+    phone: "13800138005",
+    address: "深圳市南山区",
+  },
+  {
+    name: "李四",
+    previousName: "",
+    englishName: "Li Si",
+    age: 32,
+    gender: "男",
+    department: "技术部",
+    position: "后端开发",
+    hireDate: "2018-07-22",
+    salary: 18000,
+    nationality: "汉族",
+    education: "本科",
+    phone: "13800138006",
+    address: "杭州市西湖区",
+  },
+  {
+    name: "王五",
+    previousName: "王小五",
+    englishName: "Wang Wu",
+    age: 25,
+    gender: "女",
+    department: "设计部",
+    position: "UI设计",
+    hireDate: "2021-01-10",
+    salary: 12000,
+    nationality: "汉族",
+    education: "本科",
+    phone: "13800138007",
+    address: "南京市玄武区",
+  },
+  {
+    name: "赵六",
+    previousName: "",
+    englishName: "Zhao Liu",
+    age: 35,
+    gender: "男",
+    department: "产品部",
+    position: "产品经理",
+    hireDate: "2017-05-30",
+    salary: 20000,
+    nationality: "汉族",
+    education: "硕士",
+    phone: "13800138008",
+    address: "成都市锦江区",
+  },
+];
+
+// 字段值关联映射 - 用于智能提示
+const fieldValueMap = {
+  gender: ["男", "女", "未知"],
+  nationality: ["汉族", "回族", "满族", "壮族", "苗族"],
+  education: ["本科", "硕士", "博士", "大专", "高中"],
+};
+
+// 收集所有可能的值用于匹配
+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;
+};
+
+// 输入框相关
+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([]);
+
+// 获取当前正在输入的部分
+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 position = 0;
+    for (let i = 0; i < index; i++) {
+      position += parts[i].length + 1; // +1 是分号的长度
+    }
+
+    // 设置光标位置
+    setTimeout(() => {
+      inputEl.focus();
+      inputEl.setSelectionRange(position, position + 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;
+};
+
+// 处理查询
+const handleSearch = () => {
+  if (!currentInput.value.trim()) return;
+
+  // 解析条件
+  parsedConditions.value = parseConditions(currentInput.value);
+
+  // 执行过滤
+  filteredData.value = filterData(parsedConditions.value);
+
+  // 显示结果
+  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);
+
+  // 重置选中的条件索引
+  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;
+  searchInput.value.focus();
+};
+
+// 监听输入框宽度变化
+const updateInputWidth = () => {
+  if (searchInput.value) {
+    inputWidth.value = searchInput.value.$el.clientWidth;
+  }
+};
+
+// 初始化
+onMounted(() => {
+  initializeValues();
+  updateInputWidth();
+  window.addEventListener("resize", updateInputWidth);
+
+  // 自动聚焦输入框
+  setTimeout(() => {
+    searchInput.value.focus();
+  }, 100);
+
+  // 点击页面其他地方隐藏建议
+  document.addEventListener("click", (e) => {
+    if (
+      !e.target.closest(".search-box") &&
+      !e.target.closest(".suggestions-dropdown")
+    ) {
+      showSuggestions.value = false;
+    }
+  });
+});
+
+// 监听输入框宽度变化
+watch(
+  () => currentInput.value,
+  () => {
+    // 延迟更新，确保DOM已更新
+    setTimeout(() => {
+      updateInputWidth();
+    }, 0);
+  }
+);
+</script>
+
+
+<style scoped>
+.search-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.page-header h1 {
+  font-size: 28px;
+  margin-bottom: 10px;
+  color: #333;
+}
+
+.page-header p {
+  color: #666;
+  font-size: 16px;
+}
+
+.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;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.results-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.results-header h2 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.results-table {
+  width: 100%;
+}
+
+.no-results {
+  padding: 50px 0;
+  text-align: center;
+}
+
+.help-section {
+  margin-top: 30px;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+}
+
+.help-content {
+  padding: 15px;
+  line-height: 1.6;
+}
+
+.help-content p {
+  margin: 8px 0;
+}
+
+.highlighted-text {
+  color: #409eff;
+  font-weight: 500;
+}
+
+.clear-button {
+  color: #666;
+}
+
+@media (max-width: 768px) {
+  .search-box {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .main-input {
+    min-width: auto;
+  }
+
+  .search-button {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/order/intention/query.vue b/src/views/order/intention/query.vue
new file mode 100644
index 0000000..56e9580
--- /dev/null
+++ b/src/views/order/intention/query.vue
@@ -0,0 +1,1273 @@
+<template>
+  <div class="search-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1>多条件查询系统</h1>
+      <p>输入查询条件，支持字段名和值的智能匹配，多个条件用分号分隔</p>
+    </div>
+
+    <!-- 主查询区域 -->
+    <div class="search-box">
+      <div
+        class="custom-input-wrapper"
+        :style="{ width: inputWidth + 'px' }"
+        @click="handleInputContainerClick"
+      >
+        <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>
+
+      <!-- 下拉建议框 -->
+      <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>
+
+        <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>
+    </div>
+
+    <!-- 查询结果区域 -->
+    <div class="results-section" v-if="showResults">
+      <div class="results-header">
+        <h2>查询结果</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 === 0" class="no-results">
+        <el-empty description="没有匹配的结果"></el-empty>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script setup>
+import { ref, onMounted, watch, nextTick } from "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: "图片" },
+];
+
+// 模拟数据
+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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+];
+
+// 字段值关联映射 - 用于智能提示
+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;
+};
+
+// 输入框相关
+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([]);
+
+// 获取当前正在输入的部分
+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;
+};
+
+// 处理查询
+const handleSearch = () => {
+  if (!currentInput.value.trim()) return;
+
+  // 解析条件
+  parsedConditions.value = parseConditions(currentInput.value);
+
+  // 执行过滤
+  filteredData.value = filterData(parsedConditions.value);
+
+  // 显示结果
+  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);
+
+  // 重置选中的条件索引
+  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;
+  searchInput.value.focus();
+};
+
+// 监听输入框宽度变化
+const updateInputWidth = () => {
+  if (searchInput.value) {
+    inputWidth.value = searchInput.value.$el.clientWidth;
+  }
+};
+
+// 初始化
+onMounted(() => {
+  initializeValues();
+  updateInputWidth();
+  window.addEventListener("resize", updateInputWidth);
+
+  // 自动聚焦输入框
+  setTimeout(() => {
+    searchInput.value.focus();
+  }, 100);
+
+  // 点击页面其他地方隐藏建议
+  document.addEventListener("click", (e) => {
+    if (
+      !e.target.closest(".search-box") &&
+      !e.target.closest(".suggestions-dropdown")
+    ) {
+      showSuggestions.value = false;
+    }
+  });
+});
+
+// 监听输入框宽度变化
+watch(
+  () => currentInput.value,
+  () => {
+    // 延迟更新，确保DOM已更新
+    setTimeout(() => {
+      updateInputWidth();
+    }, 0);
+  }
+);
+</script>
+
+
+<style scoped>
+.search-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.page-header h1 {
+  font-size: 28px;
+  margin-bottom: 10px;
+  color: #333;
+}
+
+.page-header p {
+  color: #666;
+  font-size: 16px;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+  material: relative;
+}
+
+.custom-input-wrapper {
+  material: relative;
+  flex-grow: 1;
+}
+
+.main-input {
+  width: 100%;
+  min-width: 300px;
+  font-size: 16px;
+}
+
+.search-button {
+  white-space: nowrap;
+}
+
+.suggestions-dropdown {
+  material: 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;
+  material: 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 {
+  material: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #409eff;
+  opacity: 0.7;
+}
+
+.results-section {
+  margin-top: 30px;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.results-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.results-header h2 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.results-table {
+  width: 100%;
+}
+
+.no-results {
+  padding: 50px 0;
+  text-align: center;
+}
+
+.clear-button {
+  color: #666;
+}
+
+@media (max-width: 768px) {
+  .search-box {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .main-input {
+    min-width: auto;
+  }
+
+  .search-button {
+    width: 100%;
+  }
+}
+</style>