fix(ui): 修复任务列表下拉选框文字截断问题和dock栏选中效果

Author: lanshuizhiyue

src/frontEnd/src/components/CommandLinePreview.vue

@@ -40,13 +40,41 @@ const highlightedCommand = computed(() => {
   if (!props.highlight) {
     return props.command
   }
-  
-  // 简单的语法高亮
-  return props.command
-    .replace(/(--[a-zA-Z0-9-]+)/g, '<span class="param">$1</span>')
-    .replace(/(-[a-zA-Z0-9])/g, '<span class="flag">$1</span>')
-    .replace(/(".*?")/g, '<span class="string">$1</span>')
-    .replace(/(\d+)/g, '<span class="number">$1</span>')
+
+  const escapeHtml = (str: string) =>
+    str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+
+  // 单次扫描正则：按优先级匹配各类 token，避免级联替换污染
+  const tokenRegex = /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')|(--[a-zA-Z][a-zA-Z0-9-]*)|(?<=\s|^)(-[a-zA-Z0-9])(?=\s|=|$)|(?<=[\s=])(\d+)(?=[\s,]|$)/g
+
+  const cmd = props.command
+  let result = ''
+  let lastIndex = 0
+
+  let match: RegExpExecArray | null
+  while ((match = tokenRegex.exec(cmd)) !== null) {
+    if (match.index > lastIndex) {
+      result += escapeHtml(cmd.slice(lastIndex, match.index))
+    }
+
+    if (match[1]) {
+      result += `<span class="string">${escapeHtml(match[1])}</span>`
+    } else if (match[2]) {
+      result += `<span class="param">${escapeHtml(match[2])}</span>`
+    } else if (match[3]) {
+      result += `<span class="flag">${escapeHtml(match[3])}</span>`
+    } else if (match[4]) {
+      result += `<span class="number">${escapeHtml(match[4])}</span>`
+    }
+
+    lastIndex = match.index + match[0].length
+  }
+
+  if (lastIndex < cmd.length) {
+    result += escapeHtml(cmd.slice(lastIndex))
+  }
+
+  return result
 })
 
 async function copyCommand() {

src/frontEnd/src/components/TaskFilter.vue

@@ -404,6 +404,14 @@ function resetFilters() {
   height: 36px;
 }
 
+// Select 组件内部 label 样式调整，防止文字被截断
+:deep(.p-select .p-select-label) {
+  padding: 4px 8px;
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+}
+
 // DatePicker 输入框
 :deep(.p-datepicker) {
   input.p-datepicker-input {

src/frontEnd/src/views/Layout.vue

@@ -263,6 +263,9 @@ onUnmounted(() => {
   gap: 0.375rem;
   padding: 0.5rem 1rem;
   color: var(--p-text-secondary-color);
+  border-radius: 12px;
+  position: relative;
+  overflow: hidden;
 }
 
 .nav-item i {
@@ -277,13 +280,85 @@ onUnmounted(() => {
   color: var(--p-primary-color);
 }
 
+/* 科幻蓝选中效果 */
 .nav-item.active {
-  color: var(--p-primary-color);
-  background: var(--p-surface-100);
+  color: #fff;
+  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%);
+  box-shadow:
+    0 0 20px rgba(59, 130, 246, 0.5),
+    0 0 40px rgba(59, 130, 246, 0.3),
+    0 0 60px rgba(59, 130, 246, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+/* 跑马灯边框效果 - 从左上角单向射线式 */
+.nav-item.active::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 12px;
+  padding: 2px;
+  background: conic-gradient(from 0deg at 0% 0%, transparent 0deg, #60a5fa 30deg, #a78bfa 60deg, #60a5fa 90deg, transparent 120deg, transparent 360deg);
+  animation: borderGlowRay 2s linear infinite;
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+/* 内部光效 */
+.nav-item.active::after {
+  content: '';
+  position: absolute;
+  inset: 2px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
+  pointer-events: none;
+}
+
+@keyframes borderGlowRay {
+  0% {
+    background: conic-gradient(from 0deg at 0% 0%, transparent 0deg, transparent 360deg);
+  }
+  10% {
+    background: conic-gradient(from 0deg at 0% 0%, transparent 0deg, #60a5fa 10deg, #a78bfa 30deg, #60a5fa 50deg, transparent 70deg, transparent 360deg);
+  }
+  30% {
+    background: conic-gradient(from 0deg at 0% 0%, transparent 0deg, transparent 20deg, #60a5fa 40deg, #a78bfa 70deg, #60a5fa 100deg, transparent 130deg, transparent 360deg);
+  }
+  50% {
+    background: conic-gradient(from 0deg at 0% 0%, transparent 0deg, transparent 50deg, #60a5fa 80deg, #a78bfa 110deg, #60a5fa 140deg, transparent 170deg, transparent 360deg);
+  }
+  70% {
+    background: conic-gradient(from 0deg at 0% 0%, transparent 0deg, transparent 80deg, #60a5fa 110deg, #a78bfa 140deg, #60a5fa 170deg, transparent 200deg, transparent 360deg);
+  }
+  90% {
+    background: conic-gradient(from 0deg at 0% 0%, transparent 0deg, transparent 110deg, #60a5fa 140deg, #a78bfa 170deg, #60a5fa 200deg, transparent 230deg, transparent 360deg);
+  }
+  100% {
+    background: conic-gradient(from 0deg at 0% 0%, transparent 0deg, transparent 360deg);
+  }
+}
+
+/* 暗色模式科幻效果 */
 :deep(.app-dark) .nav-item.active {
-  background: var(--p-surface-800);
+  background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #4f46e5 100%);
+  box-shadow:
+    0 0 30px rgba(37, 99, 235, 0.6),
+    0 0 60px rgba(37, 99, 235, 0.4),
+    0 0 90px rgba(37, 99, 235, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+:deep(.app-dark) .nav-item.active::before {
+  background: linear-gradient(90deg, transparent, #3b82f6, #8b5cf6, #3b82f6, transparent);
+  background-size: 200% 100%;
 }
 
 /* 路由过渡动画 */

src/frontEnd/src/views/TaskDetail/components/TaskHttpRequest.vue

@@ -390,7 +390,7 @@ const copyHttpRequest = async () => {
   min-height: 0;
   overflow-y: auto;
   overflow-x: auto;
-  border: 1px solid var(--p-surface-200);
+  border: 1px solid var(--p-content-border-color);
   border-radius: 8px;
   background: var(--p-surface-900);
   line-height: 0.9;

src/frontEnd/src/views/TaskDetail/components/TaskOptions.vue

@@ -40,6 +40,8 @@
         :value="filteredOptions"
         striped-rows
         show-gridlines
+        scrollable
+        scroll-height="flex"
         class="options-table"
       >
         <Column field="name" header="配置项" sortable />
@@ -162,6 +164,8 @@ function getOptionDescription(name: string): string {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  height: 100%;
+  overflow: hidden;
 }
 
 .view-toggle {
@@ -173,6 +177,7 @@ function getOptionDescription(name: string): string {
   display: flex;
   gap: 0.5rem;
   align-items: center;
+  padding: 0 1rem;
 }
 
 .search-bar :deep(.p-icon-field) {
@@ -181,6 +186,8 @@ function getOptionDescription(name: string): string {
 
 .options-table {
   margin-top: 0.5rem;
+  flex: 1;
+  min-height: 0;
 }
 
 .empty-state {

src/frontEnd/src/views/TaskDetail/styles/taskDetail.scss

@@ -13,8 +13,7 @@
     bottom: 0;
     background:
       radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
-      radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
-      url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f1f5f9' fill-opacity='0.2'%3E%3Cpath d='M20 20.5V18H0v-2h20v2.5zm0 2.5v2.5H0V23h20zm2 0h18v2H22v-2zm0-2.5h18V18H22v2.5z'/%3E%3C/g%3E%3C/svg%3E");
+      radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
     pointer-events: none;
     z-index: 0;
   }
@@ -137,6 +136,10 @@
     margin-left: 0;
   }
 
+  :deep(.p-tablist-tab-list) {
+    border-bottom: none;
+  }
+
   :deep(.p-tab) {
     margin: 0;
     background: transparent;
@@ -196,6 +199,7 @@
   :deep(.p-tabpanels) {
     background: var(--p-content-background);
     border: 1px solid var(--p-content-border-color);
+    border-top: none;
     border-radius: 0 0 16px 16px;
     box-shadow:
       0 8px 12px -2px rgba(0, 0, 0, 0.1),
@@ -305,6 +309,7 @@
     :deep(.p-tabpanels) {
       background: linear-gradient(145deg, #334155 0%, #1e293b 100%);
       border: 1px solid rgba(255, 255, 255, 0.1);
+      border-top: none;
     }
   }
 }