From 64b52e40f49517db8a71c48f3020941d590a3346 Mon Sep 17 00:00:00 2001
From: digua <i@digua.me>
Date: Fri, 27 Mar 2026 22:56:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/main.css                         |  3 +++
 src/components/UI/SectionCard.vue                  |  4 ++--
 src/components/UI/StatCard.vue                     | 14 +++++++-------
 .../analysis/Overview/OverviewActionTools.vue      |  6 +++---
 .../analysis/Overview/OverviewIdentityCard.vue     | 12 ++++++------
 src/components/charts/EChart.vue                   |  6 +++---
 src/components/charts/EChartCalendar.vue           |  4 ++--
 src/components/charts/EChartGraph.vue              |  4 ++--
 src/pages/private-chat/components/OverviewTab.vue  |  6 +++---
 9 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
index c272ee2c..31699045 100644
--- a/src/assets/styles/main.css
+++ b/src/assets/styles/main.css
@@ -19,6 +19,9 @@
 
   /* 分析页面使用的更深背景 - 统一使用 zinc-900 */
   --color-page-dark: #18181b;
+  
+  /* 模块暗色模式半透明背景色 */
+  --color-card-dark: rgba(255, 255, 255, 0.03);
 }
 
 /* 全局滚动条样式 */
diff --git a/src/components/UI/SectionCard.vue b/src/components/UI/SectionCard.vue
index debc312b..53ddc656 100644
--- a/src/components/UI/SectionCard.vue
+++ b/src/components/UI/SectionCard.vue
@@ -36,9 +36,9 @@ const contentStyle = computed(() => {
 </script>
 
 <template>
-  <div class="rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900">
+  <div class="rounded-xl border border-gray-200 bg-white shadow-sm dark:border-white/5 dark:bg-card-dark">
     <!-- 标题区域 -->
-    <div class="px-5 py-3" :class="{ 'border-b border-gray-200 dark:border-gray-800': showDivider && $slots.default }">
+    <div class="px-5 py-3" :class="{ 'border-b border-gray-200 dark:border-white/5': showDivider && $slots.default }">
       <div class="flex items-center justify-between">
         <div>
           <p class="font-semibold text-gray-900 dark:text-white whitespace-nowrap">{{ title }}</p>
diff --git a/src/components/UI/StatCard.vue b/src/components/UI/StatCard.vue
index 764e3d11..71b4cc9d 100644
--- a/src/components/UI/StatCard.vue
+++ b/src/components/UI/StatCard.vue
@@ -29,17 +29,17 @@ const valueColorMap: Record<string, string> = {
 }
 
 const iconBgMap: Record<string, string> = {
-  pink: 'bg-pink-100 dark:bg-pink-900/30',
-  amber: 'bg-amber-100 dark:bg-amber-900/30',
-  blue: 'bg-blue-100 dark:bg-blue-900/30',
-  green: 'bg-green-100 dark:bg-green-900/30',
-  red: 'bg-red-100 dark:bg-red-900/30',
-  gray: 'bg-gray-100 dark:bg-gray-800',
+  pink: 'bg-pink-100 dark:bg-pink-500/10',
+  amber: 'bg-amber-100 dark:bg-amber-500/10',
+  blue: 'bg-blue-100 dark:bg-blue-500/10',
+  green: 'bg-green-100 dark:bg-green-500/10',
+  red: 'bg-red-100 dark:bg-red-500/10',
+  gray: 'bg-gray-100 dark:bg-white/5',
 }
 </script>
 
 <template>
-  <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+  <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-white/5 dark:bg-card-dark">
     <!-- 带图标的布局 -->
     <template v-if="icon">
       <div class="flex items-center gap-3">
diff --git a/src/components/analysis/Overview/OverviewActionTools.vue b/src/components/analysis/Overview/OverviewActionTools.vue
index 1f61cd52..451aca94 100644
--- a/src/components/analysis/Overview/OverviewActionTools.vue
+++ b/src/components/analysis/Overview/OverviewActionTools.vue
@@ -16,7 +16,7 @@ const emit = defineEmits<{
       {{ t('analysis.overview.tools') }}
     </span>
     <button
-      class="group flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-700 shadow-[0_1px_2px_rgba(0,0,0,0.02)] transition-all hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:border-white/10 dark:bg-[#161616] dark:text-gray-300 dark:hover:border-white/20 dark:hover:bg-[#1f1f1f] dark:hover:text-white"
+      class="group flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-700 shadow-[0_1px_2px_rgba(0,0,0,0.02)] transition-all hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:border-white/5 dark:bg-white/5 dark:text-gray-300 dark:hover:border-white/10 dark:hover:bg-white/10 dark:hover:text-white"
       @click="emit('openIncrementalImport')"
     >
       <div class="flex items-center gap-2.5">
@@ -33,7 +33,7 @@ const emit = defineEmits<{
     </button>
 
     <button
-      class="group flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-700 shadow-[0_1px_2px_rgba(0,0,0,0.02)] transition-all hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:border-white/10 dark:bg-[#161616] dark:text-gray-300 dark:hover:border-white/20 dark:hover:bg-[#1f1f1f] dark:hover:text-white"
+      class="group flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-700 shadow-[0_1px_2px_rgba(0,0,0,0.02)] transition-all hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:border-white/5 dark:bg-white/5 dark:text-gray-300 dark:hover:border-white/10 dark:hover:bg-white/10 dark:hover:text-white"
       @click="emit('openSessionIndex')"
     >
       <div class="flex items-center gap-2.5">
@@ -50,7 +50,7 @@ const emit = defineEmits<{
     </button>
 
     <button
-      class="group flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-700 shadow-[0_1px_2px_rgba(0,0,0,0.02)] transition-all hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:border-white/10 dark:bg-[#161616] dark:text-gray-300 dark:hover:border-white/20 dark:hover:bg-[#1f1f1f] dark:hover:text-white"
+      class="group flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-700 shadow-[0_1px_2px_rgba(0,0,0,0.02)] transition-all hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:border-white/5 dark:bg-white/5 dark:text-gray-300 dark:hover:border-white/10 dark:hover:bg-white/10 dark:hover:text-white"
       @click="emit('openMessageExport')"
     >
       <div class="flex items-center gap-2.5">
diff --git a/src/components/analysis/Overview/OverviewIdentityCard.vue b/src/components/analysis/Overview/OverviewIdentityCard.vue
index c4fabbde..5df41c5e 100644
--- a/src/components/analysis/Overview/OverviewIdentityCard.vue
+++ b/src/components/analysis/Overview/OverviewIdentityCard.vue
@@ -78,7 +78,7 @@ const themeColors = {
 }
 
 // GitHub 风格：标准的空白格底色
-const emptyColor = computed(() => (isDark.value ? '#161b22' : '#ebedf0'))
+const emptyColor = computed(() => (isDark.value ? 'rgba(255, 255, 255, 0.03)' : '#ebedf0'))
 
 const chartOption = computed<EChartsOption>(() => ({
   tooltip: {
@@ -162,7 +162,7 @@ const chartOption = computed<EChartsOption>(() => ({
       itemStyle: {
         borderRadius: 3,
         borderWidth: 2,
-        borderColor: isDark.value ? '#0f0f0f' : '#ffffff',
+        borderColor: isDark.value ? 'transparent' : '#ffffff',
       },
     },
   ],
@@ -171,12 +171,12 @@ const chartOption = computed<EChartsOption>(() => ({
 function initChart() {
   if (!chartRef.value) return
   chartInstance = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
-  chartInstance.setOption(chartOption.value)
+  chartInstance.setOption({ backgroundColor: 'transparent', ...chartOption.value })
 }
 
 function updateChart() {
   if (!chartInstance) return
-  chartInstance.setOption(chartOption.value, { notMerge: true })
+  chartInstance.setOption({ backgroundColor: 'transparent', ...chartOption.value }, { notMerge: true })
 }
 
 function handleResize() {
@@ -203,7 +203,7 @@ onUnmounted(() => {
 
 <template>
   <div
-    class="relative overflow-hidden rounded-[24px] border border-gray-200/60 bg-white p-8 shadow-sm dark:border-white/5 dark:bg-[#0f0f0f]"
+    class="relative overflow-hidden rounded-[24px] border border-gray-200/60 bg-white p-8 shadow-sm dark:border-white/5 dark:bg-card-dark"
   >
     <div class="relative flex gap-8">
       <!-- 左侧：身份信息 + 日历 -->
@@ -227,7 +227,7 @@ onUnmounted(() => {
             <div class="mt-4 flex flex-col gap-2 text-sm font-medium text-gray-500 dark:text-gray-400">
               <div class="flex items-center gap-2">
                 <div
-                  class="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"
+                  class="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-gray-100 text-gray-500 dark:bg-white/5 dark:text-gray-400"
                 >
                   <UIcon v-if="session.type === 'group'" name="i-heroicons-user-group" class="h-3.5 w-3.5" />
                   <UIcon v-else name="i-heroicons-user" class="h-3.5 w-3.5" />
diff --git a/src/components/charts/EChart.vue b/src/components/charts/EChart.vue
index 1b3a0a38..9de81d39 100644
--- a/src/components/charts/EChart.vue
+++ b/src/components/charts/EChart.vue
@@ -73,16 +73,16 @@ function initChart() {
 
   // 创建新实例
   chartInstance = echarts.init(chartRef.value, isDark.value ? 'dark' : undefined)
-  chartInstance.setOption(props.option)
+  chartInstance.setOption({ backgroundColor: 'transparent', ...props.option })
 }
 
-// 更新图表
+  // 更新图表
 function updateChart() {
   if (!chartInstance) {
     initChart()
     return
   }
-  chartInstance.setOption(props.option, { notMerge: true })
+  chartInstance.setOption({ backgroundColor: 'transparent', ...props.option }, { notMerge: true })
 }
 
 // 调整大小
diff --git a/src/components/charts/EChartCalendar.vue b/src/components/charts/EChartCalendar.vue
index d112b383..9849f8ec 100644
--- a/src/components/charts/EChartCalendar.vue
+++ b/src/components/charts/EChartCalendar.vue
@@ -163,13 +163,13 @@ function initChart() {
   chartInstance = echarts.init(chartRef.value, isDark.value ? 'dark' : undefined, {
     renderer: 'canvas',
   })
-  chartInstance.setOption(option.value)
+  chartInstance.setOption({ backgroundColor: 'transparent', ...option.value })
 }
 
 // 更新图表
 function updateChart() {
   if (!chartInstance) return
-  chartInstance.setOption(option.value, { notMerge: true })
+  chartInstance.setOption({ backgroundColor: 'transparent', ...option.value }, { notMerge: true })
 }
 
 // 响应窗口大小变化
diff --git a/src/components/charts/EChartGraph.vue b/src/components/charts/EChartGraph.vue
index f5fdfd66..856b013b 100644
--- a/src/components/charts/EChartGraph.vue
+++ b/src/components/charts/EChartGraph.vue
@@ -225,13 +225,13 @@ function initChart() {
   chartInstance = echarts.init(chartRef.value, isDark.value ? 'dark' : undefined, {
     renderer: 'canvas',
   })
-  chartInstance.setOption(option.value)
+  chartInstance.setOption({ backgroundColor: 'transparent', ...option.value })
 }
 
 // 更新图表
 function updateChart() {
   if (!chartInstance) return
-  chartInstance.setOption(option.value, { notMerge: true })
+  chartInstance.setOption({ backgroundColor: 'transparent', ...option.value }, { notMerge: true })
 }
 
 // 响应窗口大小变化
diff --git a/src/pages/private-chat/components/OverviewTab.vue b/src/pages/private-chat/components/OverviewTab.vue
index c96333a4..d72aa75b 100644
--- a/src/pages/private-chat/components/OverviewTab.vue
+++ b/src/pages/private-chat/components/OverviewTab.vue
@@ -157,7 +157,7 @@ watch(
             />
             <div
               v-else
-              class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-pink-100 dark:bg-pink-900/30"
+              class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-pink-100 dark:bg-pink-500/10"
             >
               <span class="text-2xl font-bold text-pink-600 dark:text-pink-400">
                 {{ memberComparisonData.member1.name.charAt(0) }}
@@ -176,7 +176,7 @@ watch(
 
           <!-- 中间对比条 -->
           <div class="flex-1">
-            <div class="relative h-8 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
+            <div class="relative h-8 overflow-hidden rounded-full bg-gray-100 dark:bg-white/5">
               <div
                 class="absolute left-0 top-0 h-full rounded-l-full bg-pink-500 transition-all"
                 :style="{ width: `${memberComparisonData.member1.percentage}%` }"
@@ -202,7 +202,7 @@ watch(
             />
             <div
               v-else
-              class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30"
+              class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-500/10"
             >
               <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">
                 {{ memberComparisonData.member2.name.charAt(0) }}