代码提交

frontend-web/src/strategy-components/components/task-components/KanbanColumn.tsx

@@ -37,10 +37,10 @@ export const KanbanColumn: React.FC<KanbanColumnProps> = ({
 
   const columnClass = isDark
     ? 'border border-[rgba(67,89,124,0.46)] bg-[linear-gradient(180deg,rgba(18,36,67,0.96),rgba(12,28,54,0.96))] shadow-[0_18px_40px_rgba(3,10,22,0.18)]'
-    : 'border border-[#E8E8E8] bg-[linear-gradient(180deg,#FFFFFF_0%,#FFF9F9_100%)] shadow-[0_14px_28px_rgba(245,34,45,0.06)]';
+    : 'border border-[#E8E8E8] bg-[linear-gradient(180deg,#FFFFFF_0%,#FFF9F9_100%)] shadow-[0_2px_8px_rgba(34,34,34,0.08)]';
 
   return (
-    <section className={`flex h-full flex-col rounded-[28px] p-4 ${columnClass}`}>
+    <section className={`flex h-full flex-col rounded p-4 ${columnClass}`}>
       <div className="flex items-center justify-between gap-4">
         <div className="flex min-w-0 items-center gap-2">
           <div className="flex min-w-0 items-center gap-2">
@@ -53,7 +53,7 @@ export const KanbanColumn: React.FC<KanbanColumnProps> = ({
               {title}
             </h2>
             <span
-              className={`inline-flex rounded-full px-2 py-0.5 text-xs ${
+              className={`inline-flex rounded-sm px-2 py-0.5 text-xs ${
                 isDark ? 'bg-[rgba(77,141,255,0.14)] text-[#9CCBFF]' : 'bg-[#FFF1F0] text-[#CF1322]'
               }`}
             >
@@ -76,14 +76,14 @@ export const KanbanColumn: React.FC<KanbanColumnProps> = ({
         />
       </div>
 
-      <p className={`mt-2 text-xs leading-6 ${isDark ? 'text-slate-400' : 'text-[#8C8C8C]'}`}>
+      <p className={`mt-1.5 text-xs leading-5 ${isDark ? 'text-slate-400' : 'text-[#A6A6A6]'}`}>
         按时间倒序展示，支持分页切换。
       </p>
 
-      <div className="mt-4 flex-1 space-y-4">
+      <div className="mt-3 flex-1 space-y-3">
         {tasks.length === 0 ? (
           <div
-            className={`flex h-full min-h-[220px] flex-col items-center justify-center rounded-[22px] border border-dashed ${
+            className={`flex h-full min-h-[220px] flex-col items-center justify-center rounded border border-dashed ${
               isDark
                 ? 'border-[rgba(87,111,149,0.42)] bg-[rgba(12,24,44,0.46)] text-slate-400'
                 : 'border-[#F3C4C8] bg-[#FFF7F7] text-[#A6A6A6]'

frontend-web/src/strategy-components/components/task-components/SentimentAnalyzes.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { ArrowRight, Bot, Layers, Plus, Search, Users, X } from 'lucide-react';
+import { ArrowRight, Bot, CircleCheck, Inbox, Layers, Loader, Plus, Search, Users, X } from 'lucide-react';
 import dayjs from 'dayjs';
 import { DateRangePicker, DateRangePickerProps, DateRangeValue, Loading } from 'tdesign-react';
 import { useNavigate } from 'react-router-dom';
@@ -226,7 +226,7 @@ const SentimentAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCa
 
   const toolbarClass = isDark
     ? 'border border-[rgba(67,89,124,0.46)] bg-[rgba(10,23,42,0.94)] text-white shadow-[0_16px_36px_rgba(3,10,22,0.2)]'
-    : 'border border-[#E8E8E8] bg-white text-[#222222] shadow-[0_14px_30px_rgba(245,34,45,0.06)]';
+    : 'border border-[#E8E8E8] bg-white text-[#222222] shadow-[0_2px_8px_rgba(34,34,34,0.08)]';
 
   const metricClass = isDark
     ? 'border border-[rgba(67,89,124,0.46)] bg-[rgba(12,29,54,0.94)]'
@@ -237,31 +237,31 @@ const SentimentAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCa
     : 'border-[#E8E8E8] bg-white text-[#222222] placeholder:text-[#A6A6A6]';
 
   const metrics = [
-    { label: '全部任务', value: unanalyzedTotal + runningTotal + completedTotal },
-    { label: '未分析', value: unanalyzedTotal },
-    { label: '分析中', value: runningTotal },
-    { label: '已完成', value: completedTotal },
+    { label: '全部任务', value: unanalyzedTotal + runningTotal + completedTotal, icon: Layers, fg: '#222222', chipBg: '#F5F5F5', chipFg: '#7F7F7F' },
+    { label: '未分析', value: unanalyzedTotal, icon: Inbox, fg: '#F5222D', chipBg: '#FEEDED', chipFg: '#F5222D' },
+    { label: '分析中', value: runningTotal, icon: Loader, fg: '#1677FF', chipBg: '#EAF4FF', chipFg: '#1677FF' },
+    { label: '已完成', value: completedTotal, icon: CircleCheck, fg: '#52C41A', chipBg: '#EEFCF7', chipFg: '#189D72' },
   ];
 
   return (
     <div className={shellClass}>
       <div className="mx-auto flex min-h-full max-w-[1680px] flex-col gap-4 px-6 py-6 lg:px-8">
-        <section className={`rounded-[28px] p-5 ${toolbarClass}`}>
+        <section className={`rounded px-6 py-5 ${toolbarClass}`}>
           <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
-            <div className="space-y-3">
-              <div className="flex items-center gap-2 text-xs">
-                <span className={`rounded-full px-3 py-1 ${isDark ? 'bg-[rgba(77,141,255,0.16)] text-[#9CCBFF]' : 'bg-[#FFF1F0] text-[#CF1322]'}`}>
+            <div className="space-y-2.5">
+              <div className="flex items-center gap-1.5 text-xs">
+                <span className={`rounded-sm border px-2 py-0.5 font-medium ${isDark ? 'border-[rgba(108,161,255,0.24)] bg-[rgba(77,141,255,0.16)] text-[#9CCBFF]' : 'border-[#FFD6D6] bg-[#FFF1F0] text-[#CF1322]'}`}>
                   {category}
                 </span>
-                <ArrowRight className={`h-3.5 w-3.5 ${isDark ? 'text-slate-500' : 'text-[#A6A6A6]'}`} />
-                <span className={`rounded-full px-3 py-1 ${isDark ? 'bg-[rgba(34,197,94,0.14)] text-[#89E8B8]' : 'bg-[#FFF6E8] text-[#D46B08]'}`}>
+                <ArrowRight className={`h-3 w-3 ${isDark ? 'text-slate-500' : 'text-[#A6A6A6]'}`} />
+                <span className={`rounded-sm border px-2 py-0.5 font-medium ${isDark ? 'border-[rgba(103,232,165,0.2)] bg-[rgba(34,197,94,0.14)] text-[#89E8B8]' : 'border-[#FFE2B8] bg-[#FFF6E8] text-[#D46B08]'}`}>
                   {subCategory}
                 </span>
               </div>
 
               <div>
-                <h1 className={`text-[28px] font-semibold ${isDark ? 'text-white' : 'text-[#222222]'}`}>{title}</h1>
-                <p className={`mt-2 text-sm ${isDark ? 'text-slate-300' : 'text-[#575757]'}`}>
+                <h1 className={`text-[24px] font-semibold leading-8 ${isDark ? 'text-white' : 'text-[#222222]'}`}>{title}</h1>
+                <p className={`mt-1.5 text-sm ${isDark ? 'text-slate-300' : 'text-[#575757]'}`}>
                   面向规划任务的情绪与倾向分析看板，支持快速检索、会商启动与结果回看。
                 </p>
               </div>
@@ -269,7 +269,7 @@ const SentimentAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCa
 
             <div className="flex flex-col gap-3 xl:items-end">
               <div className="flex flex-wrap items-center gap-3">
-                <label className={`flex h-11 min-w-[320px] items-center gap-3 rounded-xl border px-4 ${inputClass}`}>
+                <label className={`flex h-10 min-w-[300px] items-center gap-2 rounded-sm border px-3 ${inputClass}`}>
                   <Search className={`h-4 w-4 ${isDark ? 'text-slate-400' : 'text-[#A6A6A6]'}`} />
                   <input
                     value={searchQuery}
@@ -281,6 +281,7 @@ const SentimentAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCa
                 </label>
                 <DateRangePicker
                   className="sentiment-date-range"
+                  size="large"
                   value={range}
                   presets={presets}
                   onChange={setRangeChange}
@@ -292,7 +293,7 @@ const SentimentAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCa
 
               <button
                 type="button"
-                className={`inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm ${isDark ? 'bg-[rgba(77,141,255,0.16)] text-[#9CCBFF]' : 'bg-[#FFF1F0] text-[#CF1322]'}`}
+                className={`inline-flex items-center gap-2 rounded-sm px-4 py-2 text-sm ${isDark ? 'bg-[rgba(77,141,255,0.16)] text-[#9CCBFF]' : 'bg-[#F5222D] text-white hover:bg-[#CF1322]'}`}
               >
                 <Plus className="h-4 w-4" />
                 新建任务
@@ -302,21 +303,30 @@ const SentimentAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCa
         </section>
 
         <section className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
-          {metrics.map((item, index) => (
-            <div key={item.label} className={`rounded-[24px] p-5 ${metricClass}`}>
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-[#8C8C8C]'}`}>{item.label}</p>
-                  <p className={`mt-3 text-[36px] font-semibold ${isDark ? 'text-white' : index === 0 ? 'text-[#222222]' : 'text-[#F5222D]'}`}>
-                    {item.value}
-                  </p>
-                </div>
-                <div className={`flex h-12 w-12 items-center justify-center rounded-2xl ${isDark ? 'bg-[rgba(77,141,255,0.18)] text-[#9CCBFF]' : 'bg-[#FFF1F0] text-[#CF1322]'}`}>
-                  <Layers className="h-5 w-5" />
+          {metrics.map((item) => {
+            const Icon = item.icon;
+            return (
+              <div key={item.label} className={`rounded p-4 ${metricClass}`}>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-[#7F7F7F]'}`}>{item.label}</p>
+                    <p
+                      className={`mt-2 text-[30px] font-semibold leading-none ${isDark ? 'text-white' : ''}`}
+                      style={isDark ? undefined : { color: item.fg }}
+                    >
+                      {item.value}
+                    </p>
+                  </div>
+                  <div
+                    className={`flex h-11 w-11 items-center justify-center rounded ${isDark ? 'bg-[rgba(77,141,255,0.18)] text-[#9CCBFF]' : ''}`}
+                    style={isDark ? undefined : { backgroundColor: item.chipBg, color: item.chipFg }}
+                  >
+                    <Icon className="h-5 w-5" />
+                  </div>
                 </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </section>
 
         <section className="grid grid-cols-1 items-stretch gap-4 xl:grid-cols-3">
@@ -375,7 +385,7 @@ const SentimentAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCa
 
       {showAnalysisModal && selectedTask ? (
         <div className="fixed inset-0 z-[2000] flex items-center justify-center bg-black/45 px-4">
-          <div className={`w-full max-w-[560px] rounded-[28px] border p-6 ${isDark ? 'border-[rgba(67,89,124,0.46)] bg-[rgba(10,23,42,0.98)] text-white' : 'border-[#E8E8E8] bg-white text-[#222222] shadow-[0_18px_36px_rgba(0,0,0,0.12)]'}`}>
+          <div className={`w-full max-w-[560px] rounded border p-6 ${isDark ? 'border-[rgba(67,89,124,0.46)] bg-[rgba(10,23,42,0.98)] text-white' : 'border-[#E8E8E8] bg-white text-[#222222] shadow-[0_8px_32px_rgba(34,34,34,0.16)]'}`}>
             <div className="flex items-start justify-between gap-4">
               <div>
                 <h3 className="text-xl font-semibold">选择分析模式</h3>
@@ -386,7 +396,7 @@ const SentimentAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCa
               <button
                 type="button"
                 onClick={() => setShowAnalysisModal(false)}
-                className={`rounded-xl p-2 ${isDark ? 'hover:bg-[rgba(21,42,72,0.9)]' : 'hover:bg-[#FFF1F0]'}`}
+                className={`rounded-sm p-2 ${isDark ? 'hover:bg-[rgba(21,42,72,0.9)]' : 'hover:bg-[#FFF1F0]'}`}
               >
                 <X className="h-4 w-4" />
               </button>
@@ -396,7 +406,7 @@ const SentimentAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCa
               <button
                 type="button"
                 onClick={handleOpenTaskDetail}
-                className={`flex w-full items-center justify-between rounded-[22px] border px-5 py-4 text-left transition ${isDark ? 'border-[rgba(67,89,124,0.46)] bg-[rgba(15,33,60,0.92)] hover:border-[rgba(110,168,255,0.46)]' : 'border-[#E8E8E8] bg-[#FFF9F9] hover:border-[#F6B0B4]'}`}
+                className={`flex w-full items-center justify-between rounded border px-5 py-4 text-left transition ${isDark ? 'border-[rgba(67,89,124,0.46)] bg-[rgba(15,33,60,0.92)] hover:border-[rgba(110,168,255,0.46)]' : 'border-[#E8E8E8] bg-[#FFF9F9] hover:border-[#F6B0B4]'}`}
               >
                 <div>
                   <div className="font-medium">查看任务详情</div>
@@ -410,7 +420,7 @@ const SentimentAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCa
               <button
                 type="button"
                 onClick={handleOpenConsultation}
-                className={`flex w-full items-center justify-between rounded-[22px] border px-5 py-4 text-left transition ${isDark ? 'border-[rgba(67,89,124,0.46)] bg-[rgba(15,33,60,0.92)] hover:border-[rgba(103,232,165,0.42)]' : 'border-[#E8E8E8] bg-[#FFF9F9] hover:border-[#F6B0B4]'}`}
+                className={`flex w-full items-center justify-between rounded border px-5 py-4 text-left transition ${isDark ? 'border-[rgba(67,89,124,0.46)] bg-[rgba(15,33,60,0.92)] hover:border-[rgba(103,232,165,0.42)]' : 'border-[#E8E8E8] bg-[#FFF9F9] hover:border-[#F6B0B4]'}`}
               >
                 <div className="flex items-start gap-3">
                   <Users className={`mt-0.5 h-5 w-5 ${isDark ? 'text-[#89E8B8]' : 'text-[#CF1322]'}`} />
@@ -427,7 +437,7 @@ const SentimentAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCa
               <button
                 type="button"
                 onClick={handleSingleAgentAnalysis}
-                className={`flex w-full items-center justify-between rounded-[22px] border px-5 py-4 text-left transition ${isDark ? 'border-[rgba(67,89,124,0.46)] bg-[rgba(15,33,60,0.92)] hover:border-[rgba(167,139,250,0.46)]' : 'border-[#E8E8E8] bg-[#FFF9F9] hover:border-[#F6B0B4]'}`}
+                className={`flex w-full items-center justify-between rounded border px-5 py-4 text-left transition ${isDark ? 'border-[rgba(67,89,124,0.46)] bg-[rgba(15,33,60,0.92)] hover:border-[rgba(167,139,250,0.46)]' : 'border-[#E8E8E8] bg-[#FFF9F9] hover:border-[#F6B0B4]'}`}
               >
                 <div className="flex items-start gap-3">
                   <Bot className={`mt-0.5 h-5 w-5 ${isDark ? 'text-[#C4B5FD]' : 'text-[#7C3AED]'}`} />

frontend-web/src/strategy-components/components/task-components/TaskAnalyzes.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { ArrowRight, Bot, Layers, Plus, Search, Users, X } from 'lucide-react';
+import { ArrowRight, Bot, CircleCheck, Inbox, Layers, Loader, Plus, Search, Users, X } from 'lucide-react';
 import { DateRangePicker, DateRangePickerProps, DateRangeValue, Loading } from 'tdesign-react';
 import dayjs from 'dayjs';
 import { useNavigate } from 'react-router-dom';
@@ -224,115 +224,105 @@ const TaskAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCategor
     ? 'strategy-data h-full overflow-y-auto bg-[radial-gradient(circle_at_top_left,rgba(27,94,168,0.28),transparent_32%),linear-gradient(180deg,#081322_0%,#0d1d33_42%,#0a1628_100%)] text-slate-100'
     : 'strategy-data h-full overflow-y-auto bg-[radial-gradient(circle_at_top_left,rgba(245,34,45,0.08),transparent_26%),linear-gradient(180deg,#fffdfd_0%,#fff7f7_42%,#fafafa_100%)] text-[#222222]';
 
+  const toolbarClass = isDark
+    ? 'border border-[rgba(110,136,176,0.24)] bg-[rgba(10,23,42,0.94)] text-slate-100 shadow-[0_16px_36px_rgba(3,10,22,0.2)]'
+    : 'border border-[#E8E8E8] bg-white text-[#222222] shadow-[0_2px_8px_rgba(34,34,34,0.08)]';
+
   const metricCardClass = isDark
     ? 'border border-[rgba(110,136,176,0.24)] bg-[linear-gradient(180deg,rgba(13,31,55,0.98),rgba(8,19,34,0.98))] shadow-[0_14px_42px_rgba(2,8,20,0.30)]'
-    : 'border border-[#E8E8E8] bg-white shadow-[0_12px_30px_rgba(245,34,45,0.06)]';
+    : 'border border-[#E8E8E8] bg-white';
 
   const inputClass = isDark
     ? 'border-[rgba(110,136,176,0.3)] bg-[rgba(8,23,42,0.92)] text-slate-100 placeholder:text-slate-500'
-    : 'border-[#E8E8E8] bg-white text-[#222222] placeholder:text-[#A6A6A6] shadow-[0_4px_14px_rgba(245,34,45,0.04)]';
+    : 'border-[#E8E8E8] bg-white text-[#222222] placeholder:text-[#A6A6A6]';
 
   const panelGlowClass = isDark
     ? 'before:pointer-events-none before:absolute before:inset-x-8 before:top-0 before:h-px before:bg-[linear-gradient(90deg,transparent,rgba(96,165,250,0.45),transparent)]'
     : '';
 
   const metrics = [
-    {
-      label: '全部任务',
-      value: unanalyzedTotal + runningTotal + completedTotal,
-      icon: Layers,
-      accent: 'from-[#4D8DFF] to-[#7CC9FF]',
-    },
-    {
-      label: '未分析',
-      value: unanalyzedTotal,
-      icon: Bot,
-      accent: 'from-[#7C9BFF] to-[#5EEAD4]',
-    },
-    {
-      label: '分析中',
-      value: runningTotal,
-      icon: Layers,
-      accent: 'from-[#22C55E] to-[#67E8F9]',
-    },
-    {
-      label: '已完成',
-      value: completedTotal,
-      icon: Bot,
-      accent: 'from-[#38BDF8] to-[#A78BFA]',
-    },
+    { label: '全部任务', value: unanalyzedTotal + runningTotal + completedTotal, icon: Layers, fg: '#222222', chipBg: '#F5F5F5', chipFg: '#7F7F7F' },
+    { label: '未分析', value: unanalyzedTotal, icon: Inbox, fg: '#F5222D', chipBg: '#FEEDED', chipFg: '#F5222D' },
+    { label: '分析中', value: runningTotal, icon: Loader, fg: '#1677FF', chipBg: '#EAF4FF', chipFg: '#1677FF' },
+    { label: '已完成', value: completedTotal, icon: CircleCheck, fg: '#52C41A', chipBg: '#EEFCF7', chipFg: '#189D72' },
   ];
 
   return (
     <div className={shellClass}>
-      <div className={`relative mx-auto flex min-h-full max-w-[1680px] flex-col gap-5 px-6 py-6 lg:px-8 ${panelGlowClass}`}>
-        <div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
-          <div className="space-y-3">
-            <div className="flex items-center gap-3">
-              <div>
-                <h1 className={`text-[26px] font-semibold tracking-[0.02em] ${isDark ? 'text-slate-50' : 'text-[#222222]'}`}>
-                  {title}
-                </h1>
-                <p className={`mt-1 text-sm ${isDark ? 'text-slate-300/80' : 'text-slate-500'}`}>
-                  面向规划任务的任务分析看板，聚焦目标拆解、受众判断和策略阻力识别，支持快速检索、启动分析和查看会商结果。
-                </p>
-              </div>
-            </div>
-            <div className={`inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs ${isDark ? 'border-[rgba(110,136,176,0.28)] bg-[rgba(9,25,46,0.72)] text-slate-300' : 'border-slate-200 bg-white text-slate-600'}`}>
-              <span>{category}</span>
-              <ArrowRight className="h-3.5 w-3.5 opacity-70" />
-              <span>{subCategory}</span>
+      <div className={`relative mx-auto flex min-h-full max-w-[1680px] flex-col gap-4 px-6 py-6 lg:px-8 ${panelGlowClass}`}>
+        <section className={`rounded px-6 py-5 ${toolbarClass}`}>
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+            <h1 className={`text-[24px] font-semibold leading-8 ${isDark ? 'text-slate-50' : 'text-[#222222]'}`}>{title}</h1>
+            <div className="flex items-center gap-1.5 text-xs">
+              <span className={`rounded-sm border px-2 py-0.5 font-medium ${isDark ? 'border-[rgba(108,161,255,0.24)] bg-[rgba(77,141,255,0.16)] text-[#9CCBFF]' : 'border-[#FFD6D6] bg-[#FFF1F0] text-[#CF1322]'}`}>
+                {category}
+              </span>
+              <ArrowRight className={`h-3 w-3 ${isDark ? 'text-slate-500' : 'text-[#A6A6A6]'}`} />
+              <span className={`rounded-sm border px-2 py-0.5 font-medium ${isDark ? 'border-[rgba(103,232,165,0.2)] bg-[rgba(34,197,94,0.14)] text-[#89E8B8]' : 'border-[#FFE2B8] bg-[#FFF6E8] text-[#D46B08]'}`}>
+                {subCategory}
+              </span>
             </div>
           </div>
+          <p className={`mt-1.5 text-sm ${isDark ? 'text-slate-300' : 'text-[#575757]'}`}>
+            面向规划任务的任务分析看板，聚焦目标拆解、受众判断和策略阻力识别，支持快速检索、启动分析和查看会商结果。
+          </p>
 
-          <div className="flex flex-col gap-3 xl:items-end">
-            <div className="flex flex-wrap items-center gap-3">
-              <label className={`flex h-11 min-w-[320px] items-center gap-3 rounded-2xl border px-4 ${inputClass}`}>
-                <Search className="h-4 w-4 text-[#7CC9FF]" />
-                <input
-                  value={searchQuery}
-                  onChange={(event) => setSearchQuery(event.target.value)}
-                  onKeyDown={handleKeyDown}
-                  className="w-full bg-transparent text-sm outline-none"
-                  placeholder="搜索任务名称、摘要或负责人"
-                />
-              </label>
-              <DateRangePicker
-                className="sentiment-date-range"
-                value={dateRange}
-                presets={presets}
-                enableTimePicker
-                clearable
-                popupProps={{ overlayClassName: 'sentiment-date-range-popup' }}
-                onChange={setRangeChange}
+          <div className="mt-4 flex flex-wrap items-center gap-3">
+            <label className={`flex h-10 min-w-[240px] flex-1 items-center gap-2 rounded-sm border px-3 ${inputClass}`}>
+              <Search className={`h-4 w-4 ${isDark ? 'text-slate-400' : 'text-[#A6A6A6]'}`} />
+              <input
+                value={searchQuery}
+                onChange={(event) => setSearchQuery(event.target.value)}
+                onKeyDown={handleKeyDown}
+                className="w-full bg-transparent text-sm outline-none"
+                placeholder="搜索任务名称、摘要或负责人"
               />
-            </div>
+            </label>
+            <DateRangePicker
+              className="sentiment-date-range"
+              size="large"
+              value={dateRange}
+              presets={presets}
+              enableTimePicker
+              clearable
+              popupProps={{ overlayClassName: 'sentiment-date-range-popup' }}
+              onChange={setRangeChange}
+            />
             <button
               type="button"
-              className={`inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm ${isDark ? 'bg-[rgba(77,141,255,0.16)] text-[#9CCBFF]' : 'bg-[#FFF1F0] text-[#CF1322]'}`}
+              className={`inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-sm px-4 py-2 text-sm ${isDark ? 'bg-[rgba(77,141,255,0.16)] text-[#9CCBFF]' : 'bg-[#F5222D] text-white hover:bg-[#CF1322]'}`}
             >
               <Plus className="h-4 w-4" />
               新建任务
             </button>
           </div>
-        </div>
+        </section>
 
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
-          {metrics.map(({ label, value, icon: Icon, accent }) => (
-            <div key={label} className={`rounded-3xl p-5 ${metricCardClass}`}>
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className={`text-sm ${isDark ? 'text-slate-300/78' : 'text-slate-500'}`}>{label}</p>
-                  <p className={`mt-3 text-3xl font-semibold tracking-[0.03em] ${isDark ? 'text-white' : 'text-[#222222]'}`}>
-                    {value}
-                  </p>
-                </div>
-                <div className={`flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br ${accent} shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]`}>
-                  <Icon className="h-5 w-5 text-white" />
+          {metrics.map((item) => {
+            const Icon = item.icon;
+            return (
+              <div key={item.label} className={`rounded p-4 ${metricCardClass}`}>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-[#7F7F7F]'}`}>{item.label}</p>
+                    <p
+                      className={`mt-2 text-[30px] font-semibold leading-none ${isDark ? 'text-white' : ''}`}
+                      style={isDark ? undefined : { color: item.fg }}
+                    >
+                      {item.value}
+                    </p>
+                  </div>
+                  <div
+                    className={`flex h-11 w-11 items-center justify-center rounded ${isDark ? 'bg-[rgba(77,141,255,0.18)] text-[#9CCBFF]' : ''}`}
+                    style={isDark ? undefined : { backgroundColor: item.chipBg, color: item.chipFg }}
+                  >
+                    <Icon className="h-5 w-5" />
+                  </div>
                 </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
 
         <div className="grid auto-rows-auto grid-cols-1 items-stretch gap-4 xl:grid-cols-3">
@@ -342,7 +332,7 @@ const TaskAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCategor
                 <KanbanColumn
                   title="未分析"
                   count={unanalyzedTotal}
-                  color="bg-[#7C9BFF]"
+                  color={isDark ? 'bg-[#7CC9FF]' : 'bg-[#F5222D]'}
                   tasks={unanalyzedList}
                   taskType="unanalyzed"
                   pageIndexSearch={pageIndexChange}
@@ -358,7 +348,7 @@ const TaskAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCategor
                 <KanbanColumn
                   title="分析中"
                   count={runningTotal}
-                  color="bg-[#22C55E]"
+                  color={isDark ? 'bg-[#5EEAD4]' : 'bg-[#1677FF]'}
                   tasks={runningList}
                   taskType="running"
                   pageIndexSearch={pageIndexChange}
@@ -374,7 +364,7 @@ const TaskAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCategor
                 <KanbanColumn
                   title="已完成"
                   count={completedTotal}
-                  color="bg-[#38BDF8]"
+                  color={isDark ? 'bg-[#67E8A5]' : 'bg-[#52C41A]'}
                   tasks={completedList}
                   taskType="completed"
                   pageIndexSearch={pageIndexChange}
@@ -387,19 +377,19 @@ const TaskAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCategor
       </div>
 
       {showAnalysisModal && selectedTask ? (
-        <div className="fixed inset-0 z-[2000] flex items-center justify-center bg-[rgba(3,10,22,0.62)] px-4 backdrop-blur-sm">
-          <div className={`w-full max-w-[560px] rounded-[28px] border p-6 ${isDark ? 'border-[rgba(110,136,176,0.26)] bg-[linear-gradient(180deg,rgba(10,29,54,0.98),rgba(8,20,37,0.98))] text-slate-100 shadow-[0_28px_80px_rgba(2,8,20,0.42)]' : 'border-slate-200 bg-white text-slate-900 shadow-xl'}`}>
+        <div className="fixed inset-0 z-[2000] flex items-center justify-center bg-black/45 px-4">
+          <div className={`w-full max-w-[560px] rounded border p-6 ${isDark ? 'border-[rgba(110,136,176,0.26)] bg-[linear-gradient(180deg,rgba(10,29,54,0.98),rgba(8,20,37,0.98))] text-slate-100 shadow-[0_28px_80px_rgba(2,8,20,0.42)]' : 'border-[#E8E8E8] bg-white text-[#222222] shadow-[0_8px_32px_rgba(34,34,34,0.16)]'}`}>
             <div className="flex items-start justify-between gap-4">
               <div>
                 <h3 className="text-xl font-semibold">选择分析模式</h3>
-                <p className={`mt-2 text-sm ${isDark ? 'text-slate-300/78' : 'text-slate-500'}`}>
+                <p className={`mt-2 text-sm ${isDark ? 'text-slate-300' : 'text-[#575757]'}`}>
                   当前任务：{selectedTask.taskName}
                 </p>
               </div>
               <button
                 type="button"
                 onClick={() => setShowAnalysisModal(false)}
-                className={`rounded-xl p-2 transition ${isDark ? 'hover:bg-[rgba(15,41,74,0.88)]' : 'hover:bg-slate-100'}`}
+                className={`rounded-sm p-2 transition ${isDark ? 'hover:bg-[rgba(15,41,74,0.88)]' : 'hover:bg-[#FFF1F0]'}`}
               >
                 <X className="h-4 w-4" />
               </button>
@@ -409,15 +399,18 @@ const TaskAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCategor
               <button
                 type="button"
                 onClick={handleOpenTaskDetail}
-                className={`group flex items-center justify-between rounded-2xl border px-5 py-4 text-left transition ${isDark ? 'border-[rgba(110,136,176,0.24)] bg-[rgba(10,30,54,0.9)] hover:border-[rgba(96,165,250,0.48)] hover:bg-[rgba(12,38,69,0.96)]' : 'border-slate-200 bg-slate-50 hover:border-sky-200 hover:bg-sky-50'}`}
+                className={`group flex items-center justify-between rounded border px-5 py-4 text-left transition ${isDark ? 'border-[rgba(110,136,176,0.24)] bg-[rgba(10,30,54,0.9)] hover:border-[rgba(96,165,250,0.48)] hover:bg-[rgba(12,38,69,0.96)]' : 'border-[#E8E8E8] bg-[#FFF9F9] hover:border-[#F6B0B4]'}`}
               >
                 <div className="flex items-center gap-4">
-                  <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[linear-gradient(180deg,#1677FF,#0EA5E9)]">
-                    <Layers className="h-5 w-5 text-white" />
+                  <div
+                    className={`flex h-10 w-10 items-center justify-center rounded-sm ${isDark ? 'bg-[linear-gradient(180deg,#1677FF,#0EA5E9)] text-white' : ''}`}
+                    style={isDark ? undefined : { backgroundColor: '#EAF4FF', color: '#0079FE' }}
+                  >
+                    <Layers className="h-5 w-5" />
                   </div>
                   <div>
                     <div className="font-medium">查看任务详情</div>
-                    <div className={`mt-1 text-sm ${isDark ? 'text-slate-300/72' : 'text-slate-500'}`}>
+                    <div className={`mt-1 text-sm ${isDark ? 'text-slate-300/72' : 'text-[#575757]'}`}>
                       进入 B1 系统查看任务详情。
                     </div>
                   </div>
@@ -428,15 +421,18 @@ const TaskAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCategor
               <button
                 type="button"
                 onClick={handleOpenConsultation}
-                className={`group flex items-center justify-between rounded-2xl border px-5 py-4 text-left transition ${isDark ? 'border-[rgba(110,136,176,0.24)] bg-[rgba(10,30,54,0.9)] hover:border-[rgba(45,212,191,0.48)] hover:bg-[rgba(10,42,58,0.96)]' : 'border-slate-200 bg-slate-50 hover:border-emerald-200 hover:bg-emerald-50'}`}
+                className={`group flex items-center justify-between rounded border px-5 py-4 text-left transition ${isDark ? 'border-[rgba(110,136,176,0.24)] bg-[rgba(10,30,54,0.9)] hover:border-[rgba(45,212,191,0.48)] hover:bg-[rgba(10,42,58,0.96)]' : 'border-[#E8E8E8] bg-[#FFF9F9] hover:border-[#F6B0B4]'}`}
               >
                 <div className="flex items-center gap-4">
-                  <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[linear-gradient(180deg,#14B8A6,#22C55E)]">
-                    <Users className="h-5 w-5 text-white" />
+                  <div
+                    className={`flex h-10 w-10 items-center justify-center rounded-sm ${isDark ? 'bg-[linear-gradient(180deg,#14B8A6,#22C55E)] text-white' : ''}`}
+                    style={isDark ? undefined : { backgroundColor: '#FEEDED', color: '#CF1322' }}
+                  >
+                    <Users className="h-5 w-5" />
                   </div>
                   <div>
                     <div className="font-medium">多智能体会商</div>
-                    <div className={`mt-1 text-sm ${isDark ? 'text-slate-300/72' : 'text-slate-500'}`}>
+                    <div className={`mt-1 text-sm ${isDark ? 'text-slate-300/72' : 'text-[#575757]'}`}>
                       多个 AI 智能体从不同视角开展讨论并形成共识。
                     </div>
                   </div>
@@ -447,15 +443,18 @@ const TaskAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCategor
               <button
                 type="button"
                 onClick={handleSingleAgentAnalysis}
-                className={`group flex items-center justify-between rounded-2xl border px-5 py-4 text-left transition ${isDark ? 'border-[rgba(110,136,176,0.24)] bg-[rgba(10,30,54,0.9)] hover:border-[rgba(167,139,250,0.48)] hover:bg-[rgba(28,24,58,0.96)]' : 'border-slate-200 bg-slate-50 hover:border-violet-200 hover:bg-violet-50'}`}
+                className={`group flex items-center justify-between rounded border px-5 py-4 text-left transition ${isDark ? 'border-[rgba(110,136,176,0.24)] bg-[rgba(10,30,54,0.9)] hover:border-[rgba(167,139,250,0.48)] hover:bg-[rgba(28,24,58,0.96)]' : 'border-[#E8E8E8] bg-[#FFF9F9] hover:border-[#F6B0B4]'}`}
               >
                 <div className="flex items-center gap-4">
-                  <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[linear-gradient(180deg,#7C3AED,#A78BFA)]">
-                    <Bot className="h-5 w-5 text-white" />
+                  <div
+                    className={`flex h-10 w-10 items-center justify-center rounded-sm ${isDark ? 'bg-[linear-gradient(180deg,#7C3AED,#A78BFA)] text-white' : ''}`}
+                    style={isDark ? undefined : { backgroundColor: '#F3EDFF', color: '#7C3AED' }}
+                  >
+                    <Bot className="h-5 w-5" />
                   </div>
                   <div>
                     <div className="font-medium">单智能体分析</div>
-                    <div className={`mt-1 text-sm ${isDark ? 'text-slate-300/72' : 'text-slate-500'}`}>
+                    <div className={`mt-1 text-sm ${isDark ? 'text-slate-300/72' : 'text-[#575757]'}`}>
                       由单个 AI 智能体直接对该任务进行分析问答。
                     </div>
                   </div>

frontend-web/src/strategy-components/components/task-components/TaskCard.tsx

@@ -118,7 +118,7 @@ export const TaskCard: React.FC<TaskCardProps> = ({
 
   const panelClass = isDark
     ? 'border border-[rgba(67,89,124,0.46)] bg-[rgba(19,39,72,0.9)] shadow-[0_14px_34px_rgba(3,10,22,0.2)] hover:border-[rgba(110,168,255,0.52)]'
-    : 'border border-[#E8E8E8] bg-white shadow-[0_10px_24px_rgba(245,34,45,0.06)] hover:border-[#F6B0B4] hover:shadow-[0_16px_32px_rgba(245,34,45,0.12)]';
+    : 'border border-[#E8E8E8] bg-white shadow-[0_2px_8px_rgba(34,34,34,0.08)] hover:border-[#F6B0B4] hover:shadow-[0_4px_16px_rgba(34,34,34,0.12)]';
 
   const typeBadgeClass = isDark
     ? 'bg-[rgba(77,141,255,0.14)] text-[#A9D2FF] border border-[rgba(108,161,255,0.24)]'
@@ -151,25 +151,25 @@ export const TaskCard: React.FC<TaskCardProps> = ({
 
   return (
     <article
-      className={`group rounded-[24px] p-4 transition-all duration-200 ${panelClass}`}
+      className={`group rounded p-4 transition-all duration-200 ${panelClass}`}
       onClick={handleCardClick}
     >
       <div className="flex items-start justify-between gap-3">
         <span
-          className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium ${typeBadgeClass}`}
+          className={`inline-flex items-center gap-1.5 rounded-sm px-2 py-1 text-xs font-medium ${typeBadgeClass}`}
         >
           <TypeIcon className="h-3.5 w-3.5" />
           {typeConfig.label}
         </span>
         <span
-          className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-medium ${statusClass}`}
+          className={`inline-flex items-center rounded-sm px-2 py-1 text-xs font-medium ${statusClass}`}
         >
           {getColumnLabel(task.column)}
         </span>
       </div>
 
       <h3
-        className={`mt-5 text-[16px] font-semibold leading-7 ${
+        className={`mt-4 text-[16px] font-semibold leading-6 ${
           isDark ? 'text-white' : 'text-[#222222]'
         }`}
       >
@@ -177,9 +177,10 @@ export const TaskCard: React.FC<TaskCardProps> = ({
       </h3>
 
       <p
-        className={`mt-3 min-h-[56px] text-sm leading-7 ${
+        className={`mt-3 line-clamp-3 min-h-[63px] text-sm leading-[21px] ${
           isDark ? 'text-slate-300' : 'text-[#575757]'
         }`}
+        title={task.overview || undefined}
       >
         {task.overview || '暂无任务摘要'}
       </p>
@@ -204,9 +205,9 @@ export const TaskCard: React.FC<TaskCardProps> = ({
       <button
         type="button"
         onClick={handleActionClick}
-        className={`mt-5 flex h-12 w-full items-center justify-center gap-2 rounded-full text-sm font-medium transition ${actionClass}`}
+        className={`mt-4 flex h-9 w-full items-center justify-center gap-1.5 rounded-sm text-sm font-medium transition ${actionClass}`}
       >
-        {isCompleted ? <Eye className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+        {isCompleted ? <Eye className="h-3.5 w-3.5" /> : <Play className="h-3.5 w-3.5" />}
         {isCompleted ? '查看结果' : '开始分析'}
       </button>
     </article>