修改过滤组件的样式

src/components/ticket/TicketFilter.vue

@@ -1,14 +1,10 @@
 <template>
-  <el-card class="filter-card" shadow="hover">
+  <el-card class="filter-card" shadow="never" :body-style="{ padding: '10px 0' }">
     <el-form :model="localFilters" label-width="auto" class="search-form">
       <div class="search-container">
         <div class="filter-main">
-          <el-form-item label="工单状态">
+          <el-form-item label="工单状态" class="status-item">
-            <el-radio-group
+            <el-radio-group v-model="localFilters.status" size="default" @change="handleSearch">
-              v-model="localFilters.status"
-              size="default"
-              @change="handleSearch"
-            >
               <el-radio-button :label="null">全部</el-radio-button>
               <el-radio-button :label="0">未分配</el-radio-button>
               <el-radio-button :label="1">进行中</el-radio-button>
@@ -17,55 +13,31 @@
             </el-radio-group>
           </el-form-item>
 
-          <div class="input-group">
+          <div class="input-group-row">
             <el-form-item label="运营人员">
-              <el-select
+              <el-select v-model="localFilters.operator_name" placeholder="全部运营人员" clearable filterable
-                v-model="localFilters.operator_name"
+                class="wide-select" @change="handleSearch">
-                placeholder="全部运营人员"
+                <el-option v-for="op in operators" :key="op.id" :label="`${op.name} (${op.company})`"
-                clearable
+                  :value="op.name" />
-                filterable
-                class="w-150"
-                @change="handleSearch"
-              >
-                <el-option
-                  v-for="op in operators"
-                  :key="op.id"
-                  :label="`${op.name} (${op.company})`"
-                  :value="op.name"
-                />
               </el-select>
             </el-form-item>
 
-            <span class="divider">/</span>
+            <div class="divider-wrapper">/</div>
 
             <el-form-item label="我方负责人">
-              <el-select
+              <el-select v-model="localFilters.staff_id" placeholder="全部负责人" clearable filterable class="wide-select"
-                v-model="localFilters.staff_id"
+                @change="handleSearch">
-                placeholder="全部负责人"
+                <el-option v-for="staff in staffs" :key="staff.id" :label="staff.name" :value="staff.id" />
-                clearable
-                filterable
-                class="w-150"
-                @change="handleSearch"
-              >
-                <el-option
-                  v-for="staff in staffs"
-                  :key="staff.id"
-                  :label="staff.name"
-                  :value="staff.id"
-                />
               </el-select>
             </el-form-item>
 
-            <el-form-item label="关键词">
+            <el-form-item label="关键词" class="search-keyword">
-              <el-input
+              <el-input v-model="localFilters.search" placeholder="搜索网站、运营、备注..." clearable @keyup.enter="handleSearch"
-                v-model="localFilters.search"
+                class="wide-search-input">
-                placeholder="搜索网站、运营、备注..."
-                clearable
-                @keyup.enter="handleSearch"
-                class="search-input"
-              >
                 <template #prefix>
-                  <el-icon><Search /></el-icon>
+                  <el-icon>
+                    <Search />
+                  </el-icon>
                 </template>
               </el-input>
             </el-form-item>
@@ -73,26 +45,17 @@
         </div>
 
         <div class="filter-actions">
-          <el-button
+          <el-button type="primary" :icon="Search" @click="handleSearch" class="search-btn">
-            type="primary"
-            :icon="Search"
-            @click="handleSearch"
-            class="search-btn"
-          >
             执行筛选
           </el-button>
-          <el-button @click="$emit('reset')" plain>重置条件</el-button>
+          <el-button @click="$emit('reset')" plain>重置</el-button>
 
           <el-dropdown trigger="click" class="more-filter">
-            <el-button icon="Sort">排序</el-button>
+            <el-button :icon="Sort">排序</el-button>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item @click="setSort('desc')"
+                <el-dropdown-item @click="setSort('desc')">创建时间 (新→旧)</el-dropdown-item>
-                  >创建时间 (新→旧)</el-dropdown-item
+                <el-dropdown-item @click="setSort('asc')">创建时间 (旧→新)</el-dropdown-item>
-                >
-                <el-dropdown-item @click="setSort('asc')"
-                  >创建时间 (旧→新)</el-dropdown-item
-                >
               </el-dropdown-menu>
             </template>
           </el-dropdown>
@@ -104,31 +67,18 @@
 
 <script setup>
 import { reactive, watch } from "vue";
-import { Search } from "@element-plus/icons-vue";
+import { Search, Sort } from "@element-plus/icons-vue";
 
 const props = defineProps({
-  filters: {
+  filters: { type: Object, required: true },
-    type: Object,
+  operators: { type: Array, default: () => [] },
-    required: true,
+  staffs: { type: Array, default: () => [] },
-  },
-  // 传入的是所有客户员工的名字数组 [ "张三", "李四", ... ]
-  operators: {
-    type: Array,
-    default: () => [],
-  },
-  // 传入的是我方员工对象数组 [ {id: 1, name: "管理员"}, ... ]
-  staffs: {
-    type: Array,
-    default: () => [],
-  },
 });
 
 const emit = defineEmits(["filter-change", "reset"]);
 
-// 本地副本
 const localFilters = reactive({ ...props.filters });
 
-// 深度监听父组件 filters，用于同步重置状态
 watch(
   () => props.filters,
   (newFilters) => {
@@ -148,67 +98,102 @@ const setSort = (order) => {
 </script>
 
 <style scoped>
-/* 保持你的原样样式，仅微调间距 */
 .filter-card {
-  border: none;
+  border: none !important;
-  border-radius: 12px;
+  background: transparent;
-  background: linear-gradient(to right, #ffffff, #f9fafc);
+  /* 核心修改：禁止用户选中文字，防止点击时变蓝 */
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-user-select: none;
+  /* Safari */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE/Edge */
+  user-select: none;
+  /* 标准语法 */
 }
-.filter-card:hover {
+
-  transform: translateY(-2px);
+/* 恢复输入框的可选中状态，否则无法输入文字 */
-  box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);
+:deep(.el-input__inner) {
+  -webkit-user-select: text !important;
+  user-select: text !important;
 }
+
 .search-container {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  flex-wrap: wrap;
+  gap: 32px;
-  gap: 20px;
 }
+
 .filter-main {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 12px;
 }
-.input-group {
+
+.input-group-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
   align-items: center;
+  gap: 16px;
 }
-.w-150 {
+
-  width: 160px;
+.divider-wrapper {
-}
-.search-input {
-  width: 280px;
-}
-.divider {
-  margin: 0 4px;
   color: #dcdfe6;
+  font-size: 18px;
+  font-weight: 200;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 18px;
 }
+
+:deep(.el-form-item) {
+  margin-bottom: 18px;
+}
+
+/* 宽度控制 */
+.wide-select {
+  width: 180px;
+}
+
+.wide-search-input {
+  width: 320px;
+}
+
 .filter-actions {
   display: flex;
   gap: 10px;
-  padding-top: 4px;
+  margin-top: 4px;
-}
+  flex-shrink: 0;
-.search-btn {
-  padding: 12px 24px;
-  font-weight: bold;
-  letter-spacing: 1px;
 }
 
-@media (max-width: 1024px) {
+.search-btn {
-  .search-input {
+  font-weight: bold;
-    width: 200px;
+}
+
+@media (max-width: 1400px) {
+  .wide-search-input {
+    width: 260px;
   }
 }
+
 @media (max-width: 768px) {
   .search-container {
     flex-direction: column;
   }
-  .search-input {
+
+  .input-group-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .divider-wrapper {
+    display: none;
+  }
+
+  .wide-select,
+  .wide-search-input {
     width: 100%;
   }
 }