fix: 提交修改

2026-04-15 16:02:36 +08:00
parent 2f06aa9f5f
commit b3ed406f84
61 changed files with 7476 additions and 7226 deletions
@@ -1,7 +1,7 @@
 <template>
  <div class="ticket-list-page">
-    <!-- 顶部工具栏 -->
-    <div class="toolbar">
+    <!-- 顶部状态标签栏 -->
+    <div class="status-bar">
      <div class="status-tabs">
        <div class="tab-item pending" :class="{ active: activeStatus === 'pending' }" @click="filterByStatus('pending')">
          待处理 <span class="count">{{ stats.pending }}</span>
@@ -19,48 +19,47 @@
          全部 <span class="count">{{ stats.total }}</span>
        </div>
      </div>
-      <div class="toolbar-right">
-        <el-select v-model="sortBy" placeholder="排序方式" clearable style="width: 140px" @change="handleSortChange">
-          <el-option label="不排序" value="" />
-          <el-option label="创建时间" value="created_at" />
-          <el-option label="更新时间" value="updated_at" />
-          <el-option label="工单号" value="id" />
-        </el-select>
-        <el-select v-model="sortOrder" placeholder="排序顺序" clearable style="width: 100px" @change="handleSortChange">
-          <el-option label="默认" value="" />
-          <el-option label="降序" value="desc" />
-          <el-option label="升序" value="asc" />
-        </el-select>
-        <!-- 用户筛选输入框 -->
-        <el-input
-          :model-value="selectedUser ? selectedUser.user_name : ''"
-          placeholder="点击选择用户筛选"
-          readonly
-          style="width: 180px; cursor: pointer"
-          @click="showUserDialog = true"
-        >
-          <template #prefix>
-            <el-icon><User /></el-icon>
-          </template>
-          <template #suffix v-if="selectedUser">
-            <el-icon @click.stop="clearUserFilter" style="cursor: pointer"><Close /></el-icon>
-          </template>
-        </el-input>
-        <!-- 关键词搜索 -->
-        <el-input
-          v-model="searchKeyword"
-          placeholder="搜索工单标题/内容"
-          clearable
-          style="width: 200px"
-          @input="handleKeywordSearch"
-          @clear="handleKeywordSearch"
-        >
-          <template #prefix>
-            <el-icon><Search /></el-icon>
-          </template>
-        </el-input>
-        <el-button icon="Refresh" @click="refreshList">刷新</el-button>
-      </div>
+    </div>
+    <!-- 筛选工具栏 -->
+    <div class="filter-bar">
+      <el-select v-model="sortBy" placeholder="排序方式" clearable style="width: 140px" @change="handleSortChange">
+        <el-option label="不排序" value="" />
+        <el-option label="创建时间" value="created_at" />
+        <el-option label="更新时间" value="updated_at" />
+        <el-option label="工单号" value="id" />
+      </el-select>
+      <el-select v-model="sortOrder" placeholder="排序顺序" clearable style="width: 100px" @change="handleSortChange">
+        <el-option label="默认" value="" />
+        <el-option label="降序" value="desc" />
+        <el-option label="升序" value="asc" />
+      </el-select>
+      <el-input
+        :model-value="selectedUser ? selectedUser.user_name : ''"
+        placeholder="点击选择用户筛选"
+        readonly
+        style="width: 180px; cursor: pointer"
+        @click="showUserDialog = true"
+      >
+        <template #prefix>
+          <el-icon><User /></el-icon>
+        </template>
+        <template #suffix v-if="selectedUser">
+          <el-icon @click.stop="clearUserFilter" style="cursor: pointer"><Close /></el-icon>
+        </template>
+      </el-input>
+      <el-input
+        v-model="searchKeyword"
+        placeholder="搜索工单标题/内容"
+        clearable
+        style="width: 200px"
+        @input="handleKeywordSearch"
+        @clear="handleKeywordSearch"
+      >
+        <template #prefix>
+          <el-icon><Search /></el-icon>
+        </template>
+      </el-input>
+      <el-button icon="Refresh" @click="refreshList">刷新</el-button>
    </div>

    <!-- 工单表格（PC端） -->
@@ -559,36 +558,36 @@ onBeforeUnmount(() => {
  background: #fff;
 }

-.toolbar {
+.status-bar {
  display: flex;
-  justify-content: space-between;
  align-items: center;
-  padding: 0 20px;
-  height: 50px;
-  border-bottom: 1px solid #ebeef5;
+  justify-content: flex-start;
+  padding: 14px 20px 0;
 }

 .status-tabs {
  display: flex;
-  gap: 8px;
+  gap: 6px;
 }

 .tab-item {
-  padding: 6px 12px;
-  border-radius: 4px;
+  padding: 6px 16px;
+  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  transition: all 0.2s;
+  user-select: none;
 }

 .tab-item:hover {
-  background: #f5f7fa;
+  background: #f0f2f5;
 }

 .tab-item.active {
  background: #409eff;
  color: #fff;
+  font-weight: 500;
 }

 .tab-item.pending.active { background: #e6a23c; }
@@ -601,10 +600,13 @@ onBeforeUnmount(() => {
  font-weight: 500;
 }

-.toolbar-right {
+.filter-bar {
  display: flex;
  align-items: center;
-  gap: 8px;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 12px 20px;
+  border-bottom: 1px solid #ebeef5;
 }

 .user-dialog-content {
@@ -682,8 +684,6 @@ onBeforeUnmount(() => {
 }

 .pagination-wrapper {
-  display: flex;
-  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid #ebeef5;
 }
@@ -771,25 +771,19 @@ onBeforeUnmount(() => {

 /* 大屏平板尺寸响应式样式 (1020px - 1280px) */
@media (max-width: 1280px) and (min-width: 1021px) {
-  .toolbar {
-    padding: 12px 16px;
-    gap: 12px;
-  }
-
-  .toolbar-right {
-    flex-wrap: wrap;
+  .filter-bar {
+    padding: 10px 16px;
    gap: 8px;
  }

-  .toolbar-right .el-select {
+  .filter-bar .el-select {
    width: 120px !important;
  }

-  .toolbar-right .el-input {
+  .filter-bar .el-input {
    min-width: 160px;
  }

-  /* 表格列宽调整 */
  :deep(.el-table) {
    font-size: 13px;
  }
@@ -801,12 +795,8 @@ onBeforeUnmount(() => {

 /* 平板尺寸响应式样式 (769px - 1020px) */
@media (max-width: 1020px) and (min-width: 769px) {
-  .toolbar {
-    flex-direction: column;
-    height: auto;
-    padding: 12px 16px;
-    gap: 12px;
-    align-items: stretch;
+  .status-bar {
+    padding: 10px 16px 0;
  }

  .status-tabs {
@@ -825,22 +815,20 @@ onBeforeUnmount(() => {
    border-radius: 2px;
  }

-  .toolbar-right {
-    width: 100%;
-    flex-wrap: wrap;
+  .filter-bar {
+    padding: 10px 16px;
    gap: 8px;
  }

-  .toolbar-right .el-select {
+  .filter-bar .el-select {
    width: 120px !important;
  }

-  .toolbar-right .el-input {
+  .filter-bar .el-input {
    flex: 1;
    min-width: 150px;
  }

-  /* 表格列宽调整 */
  :deep(.el-table) {
    font-size: 13px;
  }
@@ -857,11 +845,8 @@ onBeforeUnmount(() => {
    min-height: calc(100vh - 60px);
  }

-  .toolbar {
-    flex-direction: column;
-    height: auto;
-    padding: 12px;
-    gap: 12px;
+  .status-bar {
+    padding: 10px 12px 0;
  }

  .status-tabs {
@@ -881,19 +866,18 @@ onBeforeUnmount(() => {
    font-size: 13px;
  }

-  .toolbar-right {
-    width: 100%;
-    flex-wrap: wrap;
+  .filter-bar {
+    padding: 10px 12px;
    gap: 8px;
  }

-  .toolbar-right .el-select,
-  .toolbar-right .el-input {
+  .filter-bar .el-select,
+  .filter-bar .el-input {
    flex: 1;
    min-width: 120px;
  }

-  .toolbar-right .el-button {
+  .filter-bar .el-button {
    flex-shrink: 0;
  }