From 0bb9975f315e43dd45eae1d1d8b61224651676fb Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 24 Jan 2026 10:48:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=B0=86TaskFlowQueryDialog=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E4=BD=BF=E7=94=A8Ant=20Design=20Vue=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TaskFlowQueryDialog.vue    | 217 ++++++++++++------
 1 file changed, 145 insertions(+), 72 deletions(-)

diff --git a/frontend/src/components/TaskFlowQueryDialog.vue b/frontend/src/components/TaskFlowQueryDialog.vue
index ba9d1fd..a78d043 100644
--- a/frontend/src/components/TaskFlowQueryDialog.vue
+++ b/frontend/src/components/TaskFlowQueryDialog.vue
@@ -1,29 +1,26 @@
 <template>
-  <el-dialog
-    v-model="dialogVisible"
+  <a-modal
+    v-model:open="dialogVisible"
     title="任务节点查询"
     width="720px"
-    :close-on-click-modal="false"
-    @close="handleClose"
+    :footer="null"
+    @cancel="handleClose"
+    class="task-flow-query-modal"
   >
     <!-- 搜索框 -->
     <div class="search-box">
-      <el-input
-        v-model="searchInput"
+      <a-input-search
+        v-model:value="searchInput"
         placeholder="请输入任务编号或任务标题关键字"
-        clearable
         size="large"
-        @keyup.enter="handleSearch"
+        enter-button="查询"
+        :loading="loading"
+        @search="handleSearch"
       >
         <template #prefix>
           <Icon name="search" size="sm" />
         </template>
-        <template #append>
-          <el-button type="primary" :loading="loading" @click="handleSearch">
-            查询
-          </el-button>
-        </template>
-      </el-input>
+      </a-input-search>
       <div class="search-tip">
         支持输入完整任务编号（如 TASK202601221029343146）或任务标题关键字搜索
       </div>
@@ -32,26 +29,26 @@
     <!-- 查询结果 -->
     <div v-if="result" class="result-container">
       <!-- 基本信息卡片 -->
-      <el-card class="info-card" shadow="never">
-        <template #header>
+      <a-card class="info-card" size="small">
+        <template #title>
           <div class="card-header">
             <span>任务信息</span>
-            <el-tag v-if="result.task.isPrimaryTask" type="warning" size="small">一级需求任务</el-tag>
-            <el-tag v-else size="small">普通任务</el-tag>
-            <el-tag v-if="result.task.isPipeline" type="info" size="small" style="margin-left: 8px;">流水线</el-tag>
+            <a-tag v-if="result.task.isPrimaryTask" color="warning">一级需求任务</a-tag>
+            <a-tag v-else>普通任务</a-tag>
+            <a-tag v-if="result.task.isPipeline" color="processing">流水线</a-tag>
           </div>
         </template>
-        <el-descriptions :column="2" border size="small">
-          <el-descriptions-item label="任务编号">
-            <el-text type="primary" copyable>{{ result.task.taskNo }}</el-text>
-          </el-descriptions-item>
-          <el-descriptions-item label="任务标题">{{ result.task.title }}</el-descriptions-item>
-          <el-descriptions-item label="任务积分">
-            <el-text type="success">{{ result.task.score }} 分</el-text>
-          </el-descriptions-item>
-          <el-descriptions-item label="创建时间">{{ formatTime(result.task.createTime) }}</el-descriptions-item>
-        </el-descriptions>
-      </el-card>
+        <a-descriptions :column="2" bordered size="small">
+          <a-descriptions-item label="任务编号">
+            <a-typography-text copyable>{{ result.task.taskNo }}</a-typography-text>
+          </a-descriptions-item>
+          <a-descriptions-item label="任务标题">{{ result.task.title }}</a-descriptions-item>
+          <a-descriptions-item label="任务积分">
+            <span class="score-text">{{ result.task.score }} 分</span>
+          </a-descriptions-item>
+          <a-descriptions-item label="创建时间">{{ formatTime(result.task.createTime) }}</a-descriptions-item>
+        </a-descriptions>
+      </a-card>
 
       <!-- 当前节点卡片（重点展示） -->
       <div class="current-node-card">
@@ -74,23 +71,20 @@
       </div>
 
       <!-- 流程时间线 -->
-      <el-card class="timeline-card" shadow="never">
-        <template #header>
-          <span>流程进度</span>
-        </template>
-        <el-timeline>
-          <el-timeline-item
+      <a-card class="timeline-card" size="small" title="流程进度">
+        <a-timeline>
+          <a-timeline-item
             v-for="(node, index) in result.flowTimeline"
             :key="index"
-            :type="getTimelineType(node.status)"
-            :hollow="node.status !== 'completed'"
-            :timestamp="node.time ? formatTime(node.time) : (node.status === 'pending' ? '进行中...' : '等待中')"
-            placement="top"
+            :color="getTimelineColor(node.status)"
           >
             <div class="timeline-node">
               <div class="node-name">
                 {{ node.nodeName }}
-                <el-tag v-if="node.status === 'pending'" type="warning" size="small" style="margin-left: 8px;">当前</el-tag>
+                <a-tag v-if="node.status === 'pending'" color="warning" size="small">当前</a-tag>
+              </div>
+              <div class="node-time">
+                {{ node.time ? formatTime(node.time) : (node.status === 'pending' ? '进行中...' : '等待中') }}
               </div>
               <div class="node-operator" v-if="node.operatorName">
                 <Icon name="user" size="xs" />
@@ -102,15 +96,12 @@
                 {{ node.comment }}
               </div>
             </div>
-          </el-timeline-item>
-        </el-timeline>
-      </el-card>
+          </a-timeline-item>
+        </a-timeline>
+      </a-card>
 
       <!-- 相关人员 -->
-      <el-card class="users-card" shadow="never">
-        <template #header>
-          <span>相关人员</span>
-        </template>
+      <a-card class="users-card" size="small" title="相关人员">
         <div class="users-grid">
           <div class="user-item" v-if="result.relatedUsers.publisher">
             <div class="user-role">发起人</div>
@@ -133,22 +124,18 @@
             <div class="user-dept">{{ result.relatedUsers.currentApprover.dept }}</div>
           </div>
         </div>
-      </el-card>
+      </a-card>
     </div>
 
     <!-- 空状态 -->
-    <el-empty v-else-if="searched && !result && !loading" description="未找到相关任务" />
+    <a-empty v-else-if="searched && !result && !loading" description="未找到相关任务" />
 
     <!-- 初始状态 -->
     <div v-else-if="!searched" class="initial-state">
       <Icon name="search" size="xl" class="search-icon" />
       <p>输入任务编号或标题关键字查询任务流程状态</p>
     </div>
-
-    <template #footer>
-      <el-button @click="dialogVisible = false">关闭</el-button>
-    </template>
-  </el-dialog>
+  </a-modal>
 </template>
 
 <script setup lang="ts">
@@ -223,15 +210,15 @@ const handleClose = () => {
   searched.value = false
 }
 
-// 获取时间线类型
-const getTimelineType = (status: string) => {
+// 获取时间线颜色
+const getTimelineColor = (status: string) => {
   switch (status) {
     case 'completed':
-      return 'success'
+      return 'green'
     case 'pending':
-      return 'warning'
+      return 'orange'
     default:
-      return 'info'
+      return 'gray'
   }
 }
 
@@ -252,17 +239,22 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
+@import "@/styles/variables.scss";
+
 .search-box {
   margin-bottom: 20px;
 
   .search-tip {
     margin-top: 8px;
     font-size: 12px;
-    color: #909399;
+    color: $text-tertiary;
   }
 }
 
 .result-container {
+  max-height: 60vh;
+  overflow-y: auto;
+  
   .info-card {
     margin-bottom: 16px;
 
@@ -271,6 +263,11 @@ defineExpose({
       align-items: center;
       gap: 8px;
     }
+    
+    .score-text {
+      color: $brand-primary;
+      font-weight: 600;
+    }
   }
 
   .current-node-card {
@@ -324,16 +321,23 @@ defineExpose({
       .node-name {
         font-weight: 600;
         font-size: 14px;
-        color: #303133;
+        color: $text-primary;
         display: flex;
         align-items: center;
+        gap: 8px;
+      }
+      
+      .node-time {
+        font-size: 12px;
+        color: $text-tertiary;
+        margin-top: 4px;
       }
 
       .node-operator {
         display: flex;
         align-items: center;
         gap: 4px;
-        color: #409eff;
+        color: $brand-primary;
         font-size: 13px;
         margin-top: 6px;
       }
@@ -342,7 +346,7 @@ defineExpose({
         display: flex;
         align-items: center;
         gap: 4px;
-        color: #67c23a;
+        color: $color-success;
         font-size: 12px;
         margin-top: 4px;
       }
@@ -355,28 +359,32 @@ defineExpose({
       grid-template-columns: repeat(4, 1fr);
       gap: 16px;
 
+      @media (max-width: 600px) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
       .user-item {
         text-align: center;
         padding: 12px;
-        background: #f5f7fa;
+        background: $bg-tertiary;
         border-radius: 8px;
 
         .user-role {
           font-size: 12px;
-          color: #909399;
+          color: $text-tertiary;
           margin-bottom: 6px;
         }
 
         .user-name {
           font-size: 14px;
           font-weight: 600;
-          color: #303133;
+          color: $text-primary;
           margin-bottom: 4px;
         }
 
         .user-dept {
           font-size: 12px;
-          color: #606266;
+          color: $text-secondary;
         }
       }
     }
@@ -386,11 +394,12 @@ defineExpose({
 .initial-state {
   text-align: center;
   padding: 60px 0;
-  color: #909399;
+  color: $text-tertiary;
 
   .search-icon {
     font-size: 48px;
     margin-bottom: 16px;
+    display: block;
   }
 
   p {
@@ -398,8 +407,72 @@ defineExpose({
   }
 }
 
-// 暗色模式适配
-:deep(.el-card) {
-  --el-card-bg-color: var(--el-bg-color);
+// 暗色模式下的 Modal 样式
+:deep(.ant-modal-content) {
+  background: $bg-secondary;
+  
+  .ant-modal-header {
+    background: $bg-secondary;
+    border-bottom-color: $border-primary;
+    
+    .ant-modal-title {
+      color: $text-primary;
+    }
+  }
+  
+  .ant-modal-close-x {
+    color: $text-secondary;
+  }
+}
+
+:deep(.ant-card) {
+  background: $bg-card;
+  border-color: $border-primary;
+  
+  .ant-card-head {
+    border-bottom-color: $border-primary;
+    color: $text-primary;
+  }
+  
+  .ant-card-body {
+    color: $text-primary;
+  }
+}
+
+:deep(.ant-descriptions) {
+  .ant-descriptions-item-label {
+    background: $bg-tertiary;
+    color: $text-secondary;
+  }
+  
+  .ant-descriptions-item-content {
+    background: $bg-card;
+    color: $text-primary;
+  }
+}
+
+:deep(.ant-timeline-item-content) {
+  color: $text-primary;
+}
+
+:deep(.ant-empty-description) {
+  color: $text-tertiary;
+}
+
+:deep(.ant-input-search) {
+  .ant-input {
+    background: $bg-card;
+    border-color: $border-primary;
+    color: $text-primary;
+    
+    &::placeholder {
+      color: $text-tertiary;
+    }
+  }
+  
+  .ant-input-group-addon {
+    background: transparent;
+    border-color: $border-primary;
+  }
 }
 </style>