diff --git a/.trae/documents/plan_20260122_012148.md b/.trae/documents/plan_20260122_012148.md
new file mode 100644
index 0000000..f782089
--- /dev/null
+++ b/.trae/documents/plan_20260122_012148.md
@@ -0,0 +1,54 @@
+# 更好的尺寸变化适配方案
+
+## 1. 问题分析
+当前项目使用ResizeObserver监听窗口尺寸变化，通过transform: scale实现大屏适配，但存在以下问题：
+- ResizeObserver循环错误，尤其是在对话框打开/关闭时
+- 可能导致文字模糊和交互元素精准度问题
+- 代码逻辑耦合在App.vue中，不便于维护
+
+## 2. 优化方案
+### 2.1 方案选择
+保留transform: scale的核心逻辑，但优化实现方式，解决ResizeObserver循环问题，同时保持原有设计不变。
+
+### 2.2 具体实现
+1. **将尺寸适配逻辑封装成独立组件**
+   - 创建`src/components/ScreenAdapter.vue`组件
+   - 集中管理尺寸适配逻辑，便于维护和复用
+
+2. **替换ResizeObserver为window.resize事件**
+   - 使用window.resize事件监听窗口变化
+   - 避免ResizeObserver导致的循环问题
+
+3. **增强防抖和性能优化**
+   - 添加防抖处理，减少频繁触发
+   - 使用requestAnimationFrame确保DOM更新在浏览器重绘前完成
+   - 添加严格的尺寸变化检查
+
+4. **优化缩放逻辑**
+   - 确保缩放操作不会触发新的尺寸变化
+   - 只有当实际需要时才更新DOM样式
+
+5. **添加错误处理和边界情况处理**
+   - 处理极端尺寸情况
+   - 添加错误捕获机制
+
+## 3. 实现步骤
+1. 创建`ScreenAdapter.vue`组件
+2. 实现优化后的尺寸适配逻辑
+3. 在App.vue中使用新组件替换原有逻辑
+4. 测试不同场景下的适配效果
+5. 验证ResizeObserver循环错误是否解决
+
+## 4. 预期效果
+- 解决ResizeObserver循环错误
+- 保持原有设计和布局不变
+- 提高适配性能和稳定性
+- 代码结构更清晰，便于维护
+- 支持各种尺寸的屏幕适配
+
+## 5. 技术要点
+- Vue 3 Composition API
+- 防抖函数优化
+- requestAnimationFrame应用
+- 组件化设计
+- 性能优化
\ No newline at end of file
diff --git a/.trae/documents/plan_20260122_013212.md b/.trae/documents/plan_20260122_013212.md
new file mode 100644
index 0000000..4b5785f
--- /dev/null
+++ b/.trae/documents/plan_20260122_013212.md
@@ -0,0 +1,50 @@
+# 修复画面超出屏幕问题
+
+## 1. 问题分析
+- 画面超出屏幕的主要原因是当前的缩放逻辑存在问题
+- App.vue中设置了固定的body和#app尺寸（1920x1080）
+- ScreenAdapter组件的缩放逻辑可能计算错误
+- 可能存在缩放比例方向错误的问题
+
+## 2. 修复方案
+### 2.1 方案选择
+- 调整缩放逻辑，使用等比例缩放并限制最大缩放比例
+- 确保内容始终在屏幕范围内
+- 保持原有设计的视觉效果
+
+### 2.2 具体实现
+1. **修改ScreenAdapter组件**
+   - 更改缩放比例计算逻辑，使用等比例缩放
+   - 添加屏幕边界限制，确保内容不超出屏幕
+   - 优化缩放比例方向
+
+2. **调整App.vue样式**
+   - 移除或调整固定的body和#app尺寸
+   - 确保根元素能自适应屏幕
+
+3. **优化缩放策略**
+   - 使用最小缩放比例，确保内容完全显示
+   - 调整transform-origin，确保内容居中显示
+   - 处理不同屏幕比例的适配
+
+## 3. 实现步骤
+1. 修改ScreenAdapter组件的缩放计算逻辑
+2. 调整缩放比例，使用等比例缩放
+3. 添加屏幕边界限制
+4. 调整App.vue的样式设置
+5. 测试不同屏幕尺寸下的显示效果
+6. 验证画面是否不再超出屏幕
+
+## 4. 预期效果
+- 画面不再超出屏幕
+- 保持原有设计的视觉效果
+- 内容居中显示
+- 适配不同尺寸的屏幕
+- 保持良好的用户体验
+
+## 5. 技术要点
+- 等比例缩放计算
+- 屏幕边界限制
+- transform-origin调整
+- 响应式设计
+- 不同屏幕比例适配
\ No newline at end of file
diff --git a/.trae/documents/plan_20260122_013556.md b/.trae/documents/plan_20260122_013556.md
new file mode 100644
index 0000000..86e49df
--- /dev/null
+++ b/.trae/documents/plan_20260122_013556.md
@@ -0,0 +1,45 @@
+# 恢复最初的尺寸适配模式
+
+## 1. 问题分析
+当前使用ScreenAdapter组件的样式出现问题，需要恢复到最初的ResizeObserver实现模式。
+
+## 2. 恢复方案
+### 2.1 主要修改点
+1. **移除ScreenAdapter组件**：从App.vue中移除ScreenAdapter组件的引用和使用
+2. **恢复ResizeObserver实现**：恢复到最初的ResizeObserver监听窗口尺寸变化的实现
+3. **恢复原始样式**：将App.vue的样式恢复到最初的固定尺寸设置
+4. **移除ScreenAdapter组件文件**：删除不再使用的ScreenAdapter.vue文件
+
+### 2.2 具体实现
+1. **修改App.vue**：
+   - 移除ScreenAdapter组件的引入和使用
+   - 恢复最初的ResizeObserver实现
+   - 恢复body和#app的固定尺寸设置
+
+2. **删除ScreenAdapter.vue**：
+   - 删除src/components/ScreenAdapter.vue文件
+
+3. **恢复ResizeObserver逻辑**：
+   - 使用最初的ResizeObserver实现，但保留之前的优化（如setTimeout打破循环）
+   - 确保ResizeObserver不会导致循环错误
+
+## 3. 实现步骤
+1. 修改App.vue，移除ScreenAdapter组件
+2. 恢复ResizeObserver实现
+3. 恢复原始样式设置
+4. 删除ScreenAdapter.vue文件
+5. 重启开发服务器测试
+6. 验证样式是否恢复正常
+
+## 4. 预期效果
+- 样式恢复到最初的正常状态
+- 保留之前对ResizeObserver循环错误的修复
+- 画面不再超出屏幕
+- 保持良好的用户体验
+
+## 5. 技术要点
+- Vue 3 Composition API
+- ResizeObserver实现
+- 样式恢复
+- 组件移除
+- 开发服务器测试
\ No newline at end of file
diff --git a/.trae/documents/plan_20260122_014333.md b/.trae/documents/plan_20260122_014333.md
new file mode 100644
index 0000000..5f5178b
--- /dev/null
+++ b/.trae/documents/plan_20260122_014333.md
@@ -0,0 +1,55 @@
+# 产线追溯页面优化方案
+
+## 1. 问题分析
+- **背景颜色**：当前页面使用深色背景（#2c3e50），需要改为淡色背景
+- **文字样式**：文字颜色需要调整以适应淡色背景，确保可读性
+- **详情按钮延迟**：点击详情按钮时存在延迟，需要优化异步操作
+
+## 2. 优化方案
+### 2.1 淡色背景实现
+- 将主容器和相关组件的背景色改为淡色系（如#f5f7fa）
+- 保持标题和关键元素的视觉突出
+- 调整边框和阴影，增强层次感
+
+### 2.2 文字样式调整
+- 更改文字颜色为深色，确保在淡色背景上的可读性
+- 调整字体大小和行高，优化阅读体验
+- 突出关键信息，如追溯码、状态等
+
+### 2.3 详情按钮延迟优化
+- 立即显示加载状态，提升用户感知
+- 优化异步数据请求，减少等待时间
+- 调整数据获取逻辑，优先显示关键信息
+
+## 3. 实现步骤
+1. **修改背景颜色**：
+   - 更改.trace-container的background-color
+   - 调整.trace-search-form和.trace-results的背景色
+   - 修改对话框和其他组件的背景色
+
+2. **调整文字样式**：
+   - 修改标题和内容文字颜色
+   - 调整表单标签和输入框文字颜色
+   - 优化表格文字样式
+
+3. **优化详情按钮**：
+   - 在handleViewDetail函数中立即显示对话框
+   - 添加加载状态指示器
+   - 优化数据请求逻辑，并行获取数据
+
+4. **测试和调整**：
+   - 测试页面在淡色背景下的显示效果
+   - 验证文字可读性
+   - 检查详情按钮的响应速度
+
+## 4. 预期效果
+- 页面背景改为淡色系，视觉体验更舒适
+- 文字清晰可读，关键信息突出
+- 详情按钮点击后立即响应，显示加载状态
+- 整体风格统一，符合现代UI设计
+
+## 5. 技术要点
+- CSS变量或统一的颜色管理
+- 异步操作优化
+- 响应式设计原则
+- 良好的用户体验设计
\ No newline at end of file
diff --git a/.trae/documents/添加echarts依赖.md b/.trae/documents/添加echarts依赖.md
new file mode 100644
index 0000000..dd011df
--- /dev/null
+++ b/.trae/documents/添加echarts依赖.md
@@ -0,0 +1,21 @@
+# 添加echarts依赖计划
+
+## 1. 安装echarts依赖
+- 使用yarn命令安装echarts：`yarn add echarts`
+- 这将在package.json中添加echarts依赖，并安装到node_modules目录
+
+## 2. 验证安装
+- 检查package.json文件，确认echarts已被添加到dependencies中
+- 验证node_modules目录中是否存在echarts文件夹
+
+## 3. 提供使用示例
+- 创建一个简单的echarts组件示例，展示如何在Vue 3项目中使用echarts
+- 示例包括基本的图表初始化、数据配置和响应式更新
+
+## 4. 测试运行
+- 启动开发服务器，确保添加依赖后项目能正常构建和运行
+
+## 5. 相关说明
+- echarts完全兼容Vue 3
+- 支持按需引入，可根据项目需要只引入必要的图表模块
+- 提供了丰富的图表类型和配置选项，适用于各种数据可视化场景
\ No newline at end of file
diff --git a/package.json b/package.json
index 8693c7e..93e842c 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@types/lodash": "^4.14.149",
     "axios": "^1.7.2",
     "core-js": "^3.8.3",
+    "echarts": "^6.0.0",
     "element-plus": "^2.7.7",
     "mqtt": "^5.8.1",
     "vue": "^3.2.13",
diff --git a/src/App.vue b/src/App.vue
index 0d112c2..6268f26 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,132 +1,133 @@
 <template>
-	<router-view />
+  <router-view />
 </template>
 <script setup>
 /// ===================== 大屏宽高自定义（百度搜索结果） ============================
-import { getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue'
+import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue'
 const { proxy } = getCurrentInstance()
 const screenWidth = ref(null)
 const screenHeight = ref(null)
 const resizeObserver = new ResizeObserver((entries) => {
-	if (entries.length > 0) {
-		const { width, height } = entries[0].contentRect
-		// 更新屏幕尺寸
-		screenWidth.value = width
-		screenHeight.value = height
+  if (entries.length > 0) {
+    const { width, height } = entries[0].contentRect
+    // 更新屏幕尺寸
+    screenWidth.value = width
+    screenHeight.value = height
 
-		// 调用debounce函数
-		updateStyleDebounced()
-	}
+    // 使用setTimeout打破ResizeObserver循环
+    setTimeout(() => {
+      updateStyleDebounced()
+    }, 0)
+  }
 })
 // debounce函数
 const resizeTimeout = ref(null)
 
 function debounce(func, wait) {
-	return function () {
-		clearTimeout(resizeTimeout.value)
-		resizeTimeout.value = setTimeout(func, wait)
-	}
+  return function () {
+    clearTimeout(resizeTimeout.value)
+    resizeTimeout.value = setTimeout(func, wait)
+  }
 }
 // 用于更新页面的transform样式
 function updateStyle() {
-	const docWidth = document.documentElement.clientWidth
-	const docHeight = document.documentElement.clientHeight
-	const designWidth = 1920 // 设计稿宽度
-	const designHeight = 1080 // 设计稿高度
-	const widthRatio = docWidth / designWidth
-	const heightRatio = docHeight / designHeight
-	document.body.style.transform = `scale(${widthRatio},${heightRatio})`
-	document.body.style.willChange = 'transform'
-	document.body.style.transformBox = 'fill-box'
-	document.body.style.transformOrigin = 'left top'
-	document.body.style.overflow = 'hidden'
-	// 处理浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
-	setTimeout(function () {
-		const lateWidth = document.documentElement.clientWidth
-		const lateHeight = document.documentElement.clientHeight
-		if (lateWidth !== docWidth) {
-			const lateWidthRatio = lateWidth / designWidth
-			const lateHeightRatio = lateHeight / designHeight
-			document.body.style.transform = `scale(${lateWidthRatio},${lateHeightRatio})`
-		}
-	}, 10)
+  const docWidth = document.documentElement.clientWidth
+  const docHeight = document.documentElement.clientHeight
+  const designWidth = 1920 // 设计稿宽度
+  const designHeight = 1080 // 设计稿高度
+  const widthRatio = docWidth / designWidth
+  const heightRatio = docHeight / designHeight
+  document.body.style.transform = `scale(${widthRatio},${heightRatio})`
+  document.body.style.willChange = 'transform'
+  document.body.style.transformBox = 'fill-box'
+  document.body.style.transformOrigin = 'left top'
+  document.body.style.overflow = 'hidden'
+  // 处理浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
+  setTimeout(function () {
+    const lateWidth = document.documentElement.clientWidth
+    const lateHeight = document.documentElement.clientHeight
+    if (lateWidth !== docWidth) {
+      const lateWidthRatio = lateWidth / designWidth
+      const lateHeightRatio = lateHeight / designHeight
+      document.body.style.transform = `scale(${lateWidthRatio},${lateHeightRatio})`
+    }
+  }, 10)
 }
 const updateStyleDebounced = debounce(updateStyle, 150)
 onMounted(() => {
-	proxy.$nextTick(() => {
-		// 监控屏幕尺寸变化
-		resizeObserver.observe(document.documentElement)
+  proxy.$nextTick(() => {
+    // 监控屏幕尺寸变化
+    resizeObserver.observe(document.documentElement)
 
-		// 初始化屏幕尺寸
-		screenWidth.value = document.documentElement.clientWidth
-		screenHeight.value = document.documentElement.clientHeight
-	})
+    // 初始化屏幕尺寸
+    screenWidth.value = document.documentElement.clientWidth
+    screenHeight.value = document.documentElement.clientHeight
+  })
+
+  // 启动Signalr
+  SignalrStart()
 })
 onUnmounted(() => {
-	// 清除监听
-	resizeObserver.disconnect()
-	// 清除debounce函数中设置的timeout
-	clearTimeout(resizeTimeout.value)
-	// resizeObserver.unobserve(document.documentElement);
+  // 清除监听
+  resizeObserver.disconnect()
+  // 清除debounce函数中设置的timeout
+  clearTimeout(resizeTimeout.value)
 })
 /// ================================================================
 
 /// ======================== Signalr启动 ==============================
 function SignalrStart() {
-	proxy.signalr.start().then(async (res) => {
-		// const params = { code: 200, message: '测试方法' }
-		// await proxy.signalr.SR.invoke('demo',params )
-		console.log('SignalrStart:', res)
-	})
+  proxy.signalr.start().then(async (res) => {
+    // const params = { code: 200, message: '测试方法' }
+    // await proxy.signalr.SR.invoke('demo',params )
+    console.log('SignalrStart:', res)
+  })
 }
-onMounted(() => {
-	SignalrStart()
-})
 
 /// =========================================================
 </script>
 <style lang="scss">
 body {
-	margin: 0;
-	padding: 0;
-	width: 1920px;
-	height: 1080px;
+  margin: 0;
+  padding: 0;
+  width: 1920px;
+  height: 1080px;
 }
 #app {
-	width: 1920px;
-	height: 1080px;
-	font-family: Avenir, Helvetica, Arial, sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	text-align: center;
-	color: #2c3e50;
-	background-color: #2c3e50;
-	// color:#fff;
+  width: 1920px;
+  height: 1080px;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  background-color: #2c3e50;
+  // color:#fff;
 }
 .el-overlay,
 .el-overlay-dialog {
-	width: 1920px;
-	height: 1080px;
+  width: 1920px;
+  height: 1080px;
 }
 nav {
-	padding: 30px;
+  padding: 30px;
 
-	a {
-		font-weight: bold;
-		color: #2c3e50;
+  a {
+    font-weight: bold;
+    color: #2c3e50;
 
-		&.router-link-exact-active {
-			color: #42b983;
-		}
-	}
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
 }
 .border {
-	border: 1px solid #000000;
+  border: 1px solid #000000;
 }
 .dialogBox {
-	transform: scale(1.5, 1.5);
-	margin: 0 auto;
-	transform-box: fill-box;
-	transform-origin: 0 0; /* 或者你想要的任何位置 */
+  transform: scale(1.5, 1.5);
+  margin: 0 auto;
+  transform-box: fill-box;
+  transform-origin: 0 0; /* 或者你想要的任何位置 */
 }
 </style>
diff --git a/src/components/EchartsDemo.vue b/src/components/EchartsDemo.vue
new file mode 100644
index 0000000..ff192de
--- /dev/null
+++ b/src/components/EchartsDemo.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="echarts-container">
+    <h3>echarts示例 - 折线图</h3>
+    <div ref="chartRef" class="chart"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import * as echarts from 'echarts'
+
+const chartRef = ref<HTMLElement | null>(null)
+let chartInstance: echarts.ECharts | null = null
+
+// 示例数据
+const chartData = ref({
+  xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+  series: [
+    {
+      name: '销量',
+      data: [120, 200, 150, 80, 70, 110, 130],
+      type: 'line'
+    }
+  ]
+})
+
+// 初始化图表
+function initChart() {
+  if (chartRef.value) {
+    chartInstance = echarts.init(chartRef.value)
+    updateChart()
+  }
+}
+
+// 更新图表
+function updateChart() {
+  if (chartInstance) {
+    const option = {
+      title: {
+        text: '周销量统计'
+      },
+      tooltip: {
+        trigger: 'axis'
+      },
+      xAxis: {
+        type: 'category',
+        data: chartData.value.xAxis
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: chartData.value.series
+    }
+    chartInstance.setOption(option)
+  }
+}
+
+// 监听窗口大小变化
+function handleResize() {
+  chartInstance?.resize()
+}
+
+onMounted(() => {
+  initChart()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  chartInstance?.dispose()
+})
+
+// 监听数据变化，更新图表
+watch(chartData, () => {
+  updateChart()
+}, { deep: true })
+</script>
+
+<style scoped>
+.echarts-container {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.chart {
+  width: 100%;
+  height: 400px;
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/menu/trace/index.vue b/src/views/menu/trace/index.vue
index b5109fc..a18007c 100644
--- a/src/views/menu/trace/index.vue
+++ b/src/views/menu/trace/index.vue
@@ -33,8 +33,14 @@
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="时间区间">
-              <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至"
-                start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
+              <el-date-picker
+                v-model="searchForm.dateRange"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="YYYY-MM-DD"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12" class="form-actions">
@@ -93,9 +99,15 @@
 
       <!-- 分页 -->
       <div class="pagination-container">
-        <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
-          :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
-          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
       </div>
     </div>
 
@@ -122,8 +134,7 @@
               </div>
               <div class="info-item">
                 <div class="info-label">状态</div>
-                <div class="info-value status-badge" :data-status="currentTraceData.status">{{ currentTraceData.status
-                }}</div>
+                <div class="info-value status-badge" :data-status="currentTraceData.status">{{ currentTraceData.status }}</div>
               </div>
             </div>
           </div>
@@ -133,8 +144,7 @@
         <el-tabs v-model="activeTab" type="card">
           <!-- 子零件标签页 -->
           <el-tab-pane label="子零件" name="subpart">
-            <div v-if="currentTraceData.subPartScanRecords && currentTraceData.subPartScanRecords.length > 0"
-              class="sub-part-table-container">
+            <div v-if="currentTraceData.subPartScanRecords && currentTraceData.subPartScanRecords.length > 0" class="sub-part-table-container">
               <table class="sub-part-table">
                 <thead>
                   <tr>
@@ -190,7 +200,7 @@
                     </td>
                     <td>
                       <span :class="['status-tag', record.value01 === '0' ? 'success' : 'danger']">
-                        {{ record.value01 === "0" ? 'OK' : 'NG' }}
+                        {{ record.value01 === '0' ? 'OK' : 'NG' }}
                       </span>
                     </td>
                     <td>{{ record.value02 || '-' }}</td>
@@ -265,7 +275,7 @@
                       </td>
                       <td>
                         <span :class="['status-tag', record.value01 === '0' ? 'success' : 'danger']">
-                          {{ record.value01 === "0" ? 'OK' : 'NG' }}
+                          {{ record.value01 === '0' ? 'OK' : 'NG' }}
                         </span>
                       </td>
                       <td>{{ record.value02 || '-' }}</td>
@@ -335,7 +345,7 @@
                     </td>
                     <td>
                       <span :class="['status-tag', record.value01 === '0' ? 'success' : 'danger']">
-                        {{ record.value01 === "0" ? 'OK' : 'NG' }}
+                        {{ record.value01 === '0' ? 'OK' : 'NG' }}
                       </span>
                     </td>
                     <td>{{ record.value02 || '-' }}</td>
@@ -353,104 +363,104 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
-import { ElMessage } from 'element-plus';
-import { getSnQcRecordList, getSnSubScanList, getPartSnList } from '@/api/trace/index.js';
-import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
-dayjs.locale('zh-cn');
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getSnQcRecordList, getSnSubScanList, getPartSnList } from '@/api/trace/index.js'
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+dayjs.locale('zh-cn')
 
 // 定义工序步骤接口
 interface ProcessStep {
-  processName: string;
-  time: string;
-  operator: string;
-  equipmentCode: string;
-  content: string;
+  processName: string
+  time: string
+  operator: string
+  equipmentCode: string
+  content: string
 }
 
 // 定义子零件扫描记录接口
 interface SubPartScanRecord {
-  subCode: string;
-  subName: string;
-  specification: string;
-  subPartScanCode: string;
-  isBack: number;
-  createTime: string;
+  subCode: string
+  subName: string
+  specification: string
+  subPartScanCode: string
+  isBack: number
+  createTime: string
 }
 
 // 定义质量检验记录接口
 interface QualityInspectionRecord {
-  qcType: string;
-  isBack: number;
-  value01?: string;
-  value02?: string;
-  value03?: string;
-  value04?: string;
-  value05?: string;
-  value06?: string;
-  value07?: string;
-  value08?: string;
-  value09?: string;
-  value10?: string;
-  value11?: string;
-  value12?: string;
-  value13?: string;
-  value14?: string;
-  value15?: string;
-  value16?: string;
-  value17?: string;
-  value18?: string;
-  value19?: string;
-  value20?: string;
-  value21?: string;
-  value22?: string;
-  value23?: string;
-  value24?: string;
-  value25?: string;
-  value26?: string;
-  value27?: string;
-  value28?: string;
-  value29?: string;
-  value30?: string;
-  value31?: string;
-  value32?: string;
-  value33?: string;
-  value34?: string;
-  value35?: string;
-  value36?: string;
-  value37?: string;
-  value38?: string;
-  value39?: string;
-  value40?: string;
-  [key: string]: string | number | undefined;
+  qcType: string
+  isBack: number
+  value01?: string
+  value02?: string
+  value03?: string
+  value04?: string
+  value05?: string
+  value06?: string
+  value07?: string
+  value08?: string
+  value09?: string
+  value10?: string
+  value11?: string
+  value12?: string
+  value13?: string
+  value14?: string
+  value15?: string
+  value16?: string
+  value17?: string
+  value18?: string
+  value19?: string
+  value20?: string
+  value21?: string
+  value22?: string
+  value23?: string
+  value24?: string
+  value25?: string
+  value26?: string
+  value27?: string
+  value28?: string
+  value29?: string
+  value30?: string
+  value31?: string
+  value32?: string
+  value33?: string
+  value34?: string
+  value35?: string
+  value36?: string
+  value37?: string
+  value38?: string
+  value39?: string
+  value40?: string
+  [key: string]: string | number | undefined
 }
 
 // 定义追溯数据接口
 interface TraceData {
-  partSn: string;
-  productionSn: string;
-  projectCode: string;
-  subPartScanCode: string;
-  productCode: string;
-  productionCode: string;
-  productName: string;
-  productionName: string;
-  specification: string;
-  batchNumber: string;
-  productionLine: string;
-  operator: string;
-  operatorId: string;
-  productionTime: string;
-  createTime: string;
-  inspectionTime: string;
-  status: string;
-  result: string;
-  inspector: string;
-  remark: string;
-  processSteps: ProcessStep[];
-  subPartScanRecords: SubPartScanRecord[];
-  qualityInspectionRecords: QualityInspectionRecord[];
+  partSn: string
+  productionSn: string
+  projectCode: string
+  subPartScanCode: string
+  productCode: string
+  productionCode: string
+  productName: string
+  productionName: string
+  specification: string
+  batchNumber: string
+  productionLine: string
+  operator: string
+  operatorId: string
+  productionTime: string
+  createTime: string
+  inspectionTime: string
+  status: string
+  result: string
+  inspector: string
+  remark: string
+  processSteps: ProcessStep[]
+  subPartScanRecords: SubPartScanRecord[]
+  qualityInspectionRecords: QualityInspectionRecord[]
 }
 
 // 搜索表单数据
@@ -459,41 +469,37 @@ const searchForm = reactive({
   productionSn: '',
   projectCode: '',
   subPartScanCode: '',
-  dateRange: null as [string, string] | null
-});
+  dateRange: null as [string, string] | null,
+})
 
 // 分页数据
 const pagination = reactive({
   currentPage: 1,
   pageSize: 10,
-  total: 0
-});
+  total: 0,
+})
 
 // 表格数据
-const traceDataList = ref<TraceData[]>([]);
-const loading = ref(false);
+const traceDataList = ref<TraceData[]>([])
+const loading = ref(false)
 
 // 详情对话框
-const detailDialogVisible = ref(false);
-const currentTraceData = ref<TraceData | null>(null);
-const activeTab = ref('fold');
+const detailDialogVisible = ref(false)
+const currentTraceData = ref<TraceData | null>(null)
+const activeTab = ref('fold')
 
 // 根据检验类型获取质量记录
 const getQualityRecordsByType = (type: string) => {
   if (!currentTraceData.value?.qualityInspectionRecords) {
-    return [];
+    return []
   }
-  return currentTraceData.value.qualityInspectionRecords.filter(record =>
-    record.qcType === type
-  );
-};
-
-
+  return currentTraceData.value.qualityInspectionRecords.filter((record) => record.qcType === type)
+}
 
 // 初始化数据
 onMounted(() => {
-  loadTraceData();
-});
+  loadTraceData()
+})
 
 // 通用的数据映射函数
 function mapTraceDataItem(item) {
@@ -509,13 +515,13 @@ function mapTraceDataItem(item) {
     productionCode: item.productionCode || '',
     createTime: item.createTime || '',
     result: '合格', // 结果字段，默认显示合格
-    status: '合格' // 状态字段，用于样式判断
-  };
+    status: '合格', // 状态字段，用于样式判断
+  }
 }
 
 // 加载追溯数据
 async function loadTraceData() {
-  loading.value = true;
+  loading.value = true
   try {
     const params = {
       pageNum: pagination.currentPage,
@@ -524,35 +530,36 @@ async function loadTraceData() {
       ...(searchForm.productionSn && { productionSn: searchForm.productionSn }),
       ...(searchForm.projectCode && { projectCode: searchForm.projectCode }),
       ...(searchForm.subPartScanCode && { subPartScanCode: searchForm.subPartScanCode }),
-      ...(searchForm.dateRange && searchForm.dateRange.length === 2 && {
-        startTime: searchForm.dateRange[0],
-        endTime: dayjs(searchForm.dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
-      })
-    };
+      ...(searchForm.dateRange &&
+        searchForm.dateRange.length === 2 && {
+          startTime: searchForm.dateRange[0],
+          endTime: dayjs(searchForm.dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
+        }),
+    }
 
-    const response = await getPartSnList(params);
+    const response = await getPartSnList(params)
     if (response.code === 200) {
-      const resultData = response.data?.result || [];
-      traceDataList.value = resultData.map(mapTraceDataItem);
-      pagination.total = response.data?.totalNum || 0;
+      const resultData = response.data?.result || []
+      traceDataList.value = resultData.map(mapTraceDataItem)
+      pagination.total = response.data?.totalNum || 0
     } else {
-      ElMessage.error(response.msg || '获取数据失败');
-      traceDataList.value = [];
-      pagination.total = 0;
+      ElMessage.error(response.msg || '获取数据失败')
+      traceDataList.value = []
+      pagination.total = 0
     }
   } catch (error) {
-    console.error('获取追溯数据失败:', error);
-    ElMessage.error('获取追溯数据失败');
-    traceDataList.value = [];
-    pagination.total = 0;
+    console.error('获取追溯数据失败:', error)
+    ElMessage.error('获取追溯数据失败')
+    traceDataList.value = []
+    pagination.total = 0
   } finally {
-    loading.value = false;
+    loading.value = false
   }
 }
 
 // 处理搜索
 async function handleSearch() {
-  loading.value = true;
+  loading.value = true
   try {
     const params = {
       pageNum: 1,
@@ -561,133 +568,131 @@ async function handleSearch() {
       ...(searchForm.productionSn && { productionSn: searchForm.productionSn }),
       ...(searchForm.projectCode && { projectCode: searchForm.projectCode }),
       ...(searchForm.subPartScanCode && { subPartScanCode: searchForm.subPartScanCode }),
-      ...(searchForm.dateRange && searchForm.dateRange.length === 2 && {
-        startTime: searchForm.dateRange[0],
-        endTime: dayjs(searchForm.dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
-      })
-    };
+      ...(searchForm.dateRange &&
+        searchForm.dateRange.length === 2 && {
+          startTime: searchForm.dateRange[0],
+          endTime: dayjs(searchForm.dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
+        }),
+    }
 
-    const response = await getPartSnList(params);
+    const response = await getPartSnList(params)
     if (response.code === 200) {
-      const resultData = response.data?.result || [];
-      traceDataList.value = resultData.map(mapTraceDataItem);
-      pagination.total = response.data?.totalNum || 0;
-      pagination.currentPage = 1; // 重置到第一页
+      const resultData = response.data?.result || []
+      traceDataList.value = resultData.map(mapTraceDataItem)
+      pagination.total = response.data?.totalNum || 0
+      pagination.currentPage = 1 // 重置到第一页
 
       if (traceDataList.value.length === 0) {
-        ElMessage.info('未找到匹配的数据');
+        ElMessage.info('未找到匹配的数据')
       }
     } else {
-      ElMessage.error(response.msg || '搜索失败');
-      traceDataList.value = [];
-      pagination.total = 0;
+      ElMessage.error(response.msg || '搜索失败')
+      traceDataList.value = []
+      pagination.total = 0
     }
   } catch (error) {
-    console.error('搜索失败:', error);
-    ElMessage.error('搜索失败');
-    traceDataList.value = [];
-    pagination.total = 0;
+    console.error('搜索失败:', error)
+    ElMessage.error('搜索失败')
+    traceDataList.value = []
+    pagination.total = 0
   } finally {
-    loading.value = false;
+    loading.value = false
   }
 }
 
 // 处理重置
 function handleReset() {
-  searchForm.partSn = '';
-  searchForm.productionSn = '';
-  searchForm.projectCode = '';
-  searchForm.subPartScanCode = '';
-  searchForm.dateRange = null;
+  searchForm.partSn = ''
+  searchForm.productionSn = ''
+  searchForm.projectCode = ''
+  searchForm.subPartScanCode = ''
+  searchForm.dateRange = null
 
   // 重置分页
-  pagination.currentPage = 1;
+  pagination.currentPage = 1
 
   // 重新加载所有数据
-  loadTraceData();
+  loadTraceData()
 }
 
 // 处理分页大小变化
 function handleSizeChange(size) {
-  pagination.pageSize = size;
-  loadTraceData();
+  pagination.pageSize = size
+  loadTraceData()
 }
 
 // 处理当前页码变化
 function handleCurrentChange(current) {
-  pagination.currentPage = current;
-  loadTraceData();
+  pagination.currentPage = current
+  loadTraceData()
 }
 
 // 查看详情
-async function handleViewDetail(row) {
-  // 使用row作为当前详情数据，不再设置外层表格loading状态
-  // 直接使用传入的row数据作为当前详情数据
-  const mergedData = {
+async function handleViewDetail(row: TraceData) {
+  // 立即显示对话框，减少延迟
+  const mergedData: TraceData & { isLoading: boolean } = {
     ...row,
-    subPartScanRecords: [], // 初始化空数组
-    qualityInspectionRecords: [] // 初始化空数组
-  };
+    subPartScanRecords: [] as SubPartScanRecord[], // 明确指定类型
+    qualityInspectionRecords: [] as QualityInspectionRecord[], // 明确指定类型
+    isLoading: true, // 添加加载状态
+  }
+
+  // 立即更新数据并显示对话框
+  currentTraceData.value = mergedData as TraceData
+  detailDialogVisible.value = true
 
   try {
-    // 获取子零件扫码数据（如果需要）
-    const subPartResponse = await getSnSubScanList({ partSn: row.partSn });
+    // 并行加载所有数据，提高效率
+    const [subPartResponse, foldResponse, finalResponse, dlsResponse] = await Promise.all([
+      getSnSubScanList({ partSn: row.partSn }).catch((error) => ({ code: 500 })),
+      getSnQcRecordList({ partSn: row.partSn, qcType: 'zd' }).catch((error) => ({ code: 500 })),
+      getSnQcRecordList({ partSn: row.partSn, qcType: 'eol' }).catch((error) => ({ code: 500 })),
+      getSnQcRecordList({ partSn: row.partSn, qcType: 'dls' }).catch((error) => ({ code: 500 })),
+    ])
+
+    // 更新子零件数据
     if (subPartResponse?.code === 200 && Array.isArray(subPartResponse.data?.result)) {
-      mergedData.subPartScanRecords = subPartResponse.data.result || [];
+      mergedData.subPartScanRecords = subPartResponse.data.result || []
     }
-  } catch (error) {
-    console.warn('获取子零件数据失败:', error);
-  }
 
-  try {
-    // 获取折叠检验数据
-    const foldResponse = await getSnQcRecordList({ partSn: row.partSn, qcType: 'zd' });
+    // 合并所有质量检验数据
+    const qualityRecords: QualityInspectionRecord[] = [] // 明确指定类型
+
+    // 处理折叠检验数据
     if (foldResponse?.code === 200 && Array.isArray(foldResponse.data?.result)) {
-      // 为折叠检验数据添加qcType标识
-      const foldRecords = foldResponse.data.result.map(item => ({ ...item, qcType: 'zd' }));
-      mergedData.qualityInspectionRecords = [...mergedData.qualityInspectionRecords, ...foldRecords];
+      qualityRecords.push(...foldResponse.data.result.map((item) => ({ ...item, qcType: 'zd' } as QualityInspectionRecord)))
     }
-  } catch (error) {
-    console.warn('获取折叠检验数据失败:', error);
-  }
 
-  try {
-    // 获取终检数据
-    const finalResponse = await getSnQcRecordList({ partSn: row.partSn, qcType: 'eol' });
+    // 处理终检数据
     if (finalResponse?.code === 200 && Array.isArray(finalResponse.data?.result)) {
-      // 为终检数据添加qcType标识
-      const finalRecords = finalResponse.data.result.map(item => ({ ...item, qcType: 'eol' }));
-      mergedData.qualityInspectionRecords = [...mergedData.qualityInspectionRecords, ...finalRecords];
+      qualityRecords.push(...finalResponse.data.result.map((item) => ({ ...item, qcType: 'eol' } as QualityInspectionRecord)))
     }
-  } catch (error) {
-    console.warn('获取终检数据失败:', error);
-  }
 
-  try {
-    // 获取打螺丝数据
-    const dlsResponse = await getSnQcRecordList({ partSn: row.partSn, qcType: 'dls' });
+    // 处理打螺丝数据
     if (dlsResponse?.code === 200 && Array.isArray(dlsResponse.data?.result)) {
-      // 为打螺丝数据添加qcType标识
-      const dlsRecords = dlsResponse.data.result.map(item => ({ ...item, qcType: 'dls' }));
-      mergedData.qualityInspectionRecords = [...mergedData.qualityInspectionRecords, ...dlsRecords];
+      qualityRecords.push(...dlsResponse.data.result.map((item) => ({ ...item, qcType: 'dls' } as QualityInspectionRecord)))
     }
-  } catch (error) {
-    console.warn('获取打螺丝数据失败:', error);
-  }
 
-  currentTraceData.value = mergedData;
-  console.log('mergedData', mergedData);
-  detailDialogVisible.value = true;
+    mergedData.qualityInspectionRecords = qualityRecords
+    mergedData.isLoading = false // 标记加载完成
+
+    // 更新数据
+    currentTraceData.value = { ...mergedData } as TraceData
+  } catch (error) {
+    console.error('获取详情数据失败:', error)
+    mergedData.isLoading = false
+    currentTraceData.value = { ...mergedData } as TraceData
+  }
 }
 
 // 关闭详情对话框
 function handleClose() {
-  detailDialogVisible.value = false;
-  currentTraceData.value = null;
+  detailDialogVisible.value = false
+  currentTraceData.value = null
 }
 
 // 行点击处理（可选）
-function handleRowClick(row, event) {
+function handleRowClick(row: TraceData, event: Event) {
   // 可以在这里添加行点击逻辑
 }
 </script>
@@ -695,7 +700,7 @@ function handleRowClick(row, event) {
 <style lang="scss" scoped>
 .trace-container {
   padding: 20px;
-  background-color: #2c3e50;
+  background-color: #f5f7fa;
   min-height: 100vh;
 }
 
@@ -703,18 +708,19 @@ function handleRowClick(row, event) {
   margin-bottom: 20px;
 
   h1 {
-    color: #ffffff;
+    color: #2c3e50;
     font-size: 24px;
     margin: 0;
   }
 }
 
 .trace-search-form {
-  background: #2c3e50;
+  background: #ffffff;
   padding: 20px;
   border-radius: 8px;
   margin-bottom: 20px;
-  border: 1px solid #ffffff;
+  border: 1px solid #e4e7ed;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
 
   .form-actions {
     display: flex;
@@ -724,10 +730,11 @@ function handleRowClick(row, event) {
 }
 
 .trace-results {
-  background: #2c3e50;
+  background: #ffffff;
   padding: 20px;
   border-radius: 8px;
-  border: 1px solid #ffffff;
+  border: 1px solid #e4e7ed;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
   overflow-x: auto;
 }
 
@@ -735,13 +742,13 @@ function handleRowClick(row, event) {
 .native-table {
   width: 100%;
   border-collapse: collapse;
-  background-color: #2c3e50;
+  background-color: #ffffff;
   table-layout: auto;
   /* 使用自动布局让内容决定列宽 */
 }
 
 .native-table thead {
-  background-color: #34495e;
+  background-color: #fafafa;
 }
 
 .native-table th,
@@ -749,8 +756,8 @@ function handleRowClick(row, event) {
   padding: 12px 10px;
   text-align: left;
   vertical-align: middle;
-  border: 1px solid #ffffff;
-  color: #ffffff !important;
+  border: 1px solid #e4e7ed;
+  color: #303133 !important;
   font-weight: 500;
   line-height: 1.5;
   white-space: normal;
@@ -761,7 +768,7 @@ function handleRowClick(row, event) {
 
 .native-table th {
   font-weight: 600;
-  color: #ffffff;
+  color: #606266;
 }
 
 .native-table tbody tr {
@@ -769,7 +776,7 @@ function handleRowClick(row, event) {
 }
 
 .native-table tbody tr:hover {
-  background-color: #34495e !important;
+  background-color: #f5f7fa !important;
   cursor: pointer;
 }
 
@@ -779,14 +786,14 @@ function handleRowClick(row, event) {
   justify-content: center;
   align-items: center;
   padding: 50px 0;
-  color: #ffffff;
+  color: #606266;
   font-size: 16px;
 }
 
 .loading-spinner {
   width: 30px;
   height: 30px;
-  border: 3px solid rgba(255, 255, 255, 0.3);
+  border: 3px solid rgba(0, 0, 0, 0.1);
   border-radius: 50%;
   border-top-color: #4a90e2;
   animation: spin 1s ease-in-out infinite;
@@ -809,37 +816,42 @@ function handleRowClick(row, event) {
 }
 
 .status-tag.success {
-  background-color: #52c41a;
-  color: #ffffff;
+  background-color: #f0f9eb;
+  color: #52c41a;
+  border: 1px solid #b7eb8f;
 }
 
 .status-tag.danger {
-  background-color: #ff4d4f;
-  color: #ffffff;
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border: 1px solid #ffccc7;
 }
 
 /* 详情按钮 */
 .detail-button {
-  background-color: #4a90e2;
+  background-color: #409eff;
   color: #ffffff;
-  border: none;
+  border: 1px solid #409eff;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   padding: 8px 20px;
   border-radius: 6px;
   transition: all 0.3s ease;
-  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
+  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
 }
 
 .detail-button:hover {
-  background-color: #5ba2f2;
+  background-color: #66b1ff;
+  border-color: #66b1ff;
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
 }
 
 .detail-button:active {
   transform: translateY(0);
+  background-color: #3a8ee6;
+  border-color: #3a8ee6;
 }
 
 .pagination-container {
@@ -851,11 +863,11 @@ function handleRowClick(row, event) {
 .detail-content {
   max-height: 600px;
   overflow-y: auto;
-  color: #ffffff;
+  color: #303133;
 }
 
 .detail-content h3 {
-  color: #ffffff;
+  color: #303133;
 }
 
 /* 描述列表 */
@@ -877,13 +889,13 @@ function handleRowClick(row, event) {
 
 .description-label {
   font-weight: 600;
-  color: #ffffff !important;
+  color: #606266 !important;
   min-width: 100px;
   margin-right: 10px;
 }
 
 .description-value {
-  color: #ffffff !important;
+  color: #303133 !important;
   font-weight: 500;
   flex: 1;
 }
@@ -894,7 +906,7 @@ function handleRowClick(row, event) {
 
   h3 {
     margin-bottom: 15px;
-    color: #ffffff;
+    color: #303133;
   }
 }
 
@@ -910,7 +922,7 @@ function handleRowClick(row, event) {
   top: 0;
   bottom: 0;
   width: 2px;
-  background-color: #4a90e2;
+  background-color: #409eff;
 }
 
 .timeline-item {
@@ -925,40 +937,41 @@ function handleRowClick(row, event) {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background-color: #4a90e2;
+  background-color: #409eff;
   border: 2px solid #ffffff;
 }
 
 .timeline-content {
-  background-color: #161b22;
-  border: 1px solid #30363d;
+  background-color: #ffffff;
+  border: 1px solid #e4e7ed;
   border-radius: 8px;
   padding: 15px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .timeline-time {
   font-size: 12px;
-  color: #c9d1d9;
+  color: #909399;
   margin-bottom: 8px;
 }
 
 .timeline-card h4 {
-  color: #ffffff;
+  color: #303133;
   margin: 0 0 10px 0;
   font-size: 16px;
 }
 
 .timeline-card p {
-  color: #c9d1d9;
+  color: #606266;
   margin: 5px 0;
   font-size: 14px;
 }
 
 /* Element Plus 组件样式覆盖 */
 :deep(.el-pagination button) {
-  background-color: #2c3e50;
-  color: #ffffff;
-  border: 1px solid #ffffff;
+  background-color: #ffffff;
+  color: #606266;
+  border: 1px solid #dcdfe6;
 }
 
 /* 详情页标签页样式 - 修复边框对齐问题 */
@@ -966,7 +979,7 @@ function handleRowClick(row, event) {
   .el-tabs__header {
     margin-bottom: 0;
     /* 移除底部边距 */
-    border-bottom: 1px solid #4a90e2;
+    border-bottom: 1px solid #e4e7ed;
   }
 
   .el-tabs__nav {
@@ -976,29 +989,32 @@ function handleRowClick(row, event) {
   }
 
   .el-tabs__item {
-    color: #90a4ae;
+    color: #606266;
     font-size: 16px;
     font-weight: 500;
     height: 48px;
-    line-height: 48px;
+    line-height: 46px; /* 调整行高，考虑边框高度 */
     padding: 0 24px;
     margin-right: 16px;
     border-radius: 8px 8px 0 0;
     border: 1px solid transparent;
-    border-bottom: none;
+    border-bottom: 1px solid transparent;
     transition: all 0.3s ease;
+    box-sizing: border-box; /* 确保边框包含在高度内 */
   }
 
   .el-tabs__item:hover {
-    color: #4a90e2;
-    background-color: rgba(74, 144, 226, 0.1);
+    color: #409eff;
+    background-color: rgba(64, 158, 255, 0.1);
   }
 
   .el-tabs__item.is-active {
-    color: #ffffff;
-    background-color: #2c3e50;
-    border-color: #4a90e2;
+    color: #409eff;
+    background-color: #ffffff;
+    border-color: #e4e7ed;
+    border-bottom-color: #ffffff; /* 覆盖底部边框为白色，与内容区背景一致 */
     font-weight: 600;
+    margin-bottom: -1px; /* 负margin确保与底部边框对齐 */
   }
 
   .el-tabs__active-bar {
@@ -1008,104 +1024,104 @@ function handleRowClick(row, event) {
 
   .el-tabs__content {
     padding: 20px;
-    border: 1px solid #4a90e2;
+    border: 1px solid #e4e7ed;
     border-top: none;
     border-radius: 0 0 8px 8px;
   }
 }
 
 :deep(.el-pagination .el-pager li) {
-  background-color: #2c3e50;
-  color: #ffffff;
+  background-color: #ffffff;
+  color: #606266;
 }
 
 :deep(.el-pagination .el-pager li.active) {
-  background-color: #4a90e2;
+  background-color: #409eff;
   color: #ffffff;
 }
 
 /* 对话框样式 */
 :deep(.el-dialog__header) {
-  background-color: #2c3e50;
-  border-bottom: 1px solid #ffffff;
+  background-color: #ffffff;
+  border-bottom: 1px solid #e4e7ed;
 }
 
 :deep(.el-dialog__title) {
-  color: #ffffff !important;
+  color: #303133 !important;
   font-weight: 600;
 }
 
 :deep(.el-dialog__body) {
-  background-color: #2c3e50;
-  color: #ffffff;
+  background-color: #ffffff;
+  color: #303133;
   padding: 0;
   /* 移除body内边距，避免与内容区域重复 */
 }
 
 :deep(.el-dialog__footer) {
-  background-color: #2c3e50;
-  border-top: 1px solid #ffffff;
+  background-color: #ffffff;
+  border-top: 1px solid #e4e7ed;
 }
 
 /* 输入框和按钮样式 */
 :deep(.el-input__wrapper) {
-  background-color: #2c3e50;
-  border-color: #ffffff;
+  background-color: #ffffff;
+  border-color: #dcdfe6;
 }
 
 :deep(.el-input__inner) {
-  background-color: #2c3e50;
-  color: #ffffff !important;
+  background-color: #ffffff;
+  color: #303133 !important;
   font-weight: 500;
 }
 
 /* 确保表单标签清晰可见 */
 :deep(.el-form-item__label) {
-  color: #ffffff !important;
+  color: #606266 !important;
   font-weight: 600;
 }
 
 :deep(.el-button--default) {
-  background-color: #2c3e50;
-  color: #ffffff;
-  border: 1px solid #ffffff;
+  background-color: #ffffff;
+  color: #606266;
+  border: 1px solid #dcdfe6;
 }
 
 :deep(.el-button--primary) {
-  background-color: #4a90e2;
+  background-color: #409eff;
   color: #ffffff;
-  border: 1px solid #4a90e2;
+  border: 1px solid #409eff;
 }
 
 :deep(.el-button--primary:hover) {
-  background-color: #5ba2f2;
+  background-color: #66b1ff;
 }
 
 /* 日期选择器样式 */
 :deep(.el-date-editor .el-input__inner) {
-  background-color: #2c3e50;
-  color: #ffffff;
+  background-color: #ffffff;
+  color: #303133;
 }
 
 :deep(.el-picker-panel) {
-  background-color: #2c3e50;
-  border: 1px solid #ffffff;
+  background-color: #ffffff;
+  border: 1px solid #dcdfe6;
 }
 
 :deep(.el-date-table th) {
-  color: #ffffff;
+  color: #606266;
 }
 
 :deep(.el-date-table td) {
-  color: #ffffff;
+  color: #606266;
 }
 
 :deep(.el-date-table td.today) {
-  color: #4a90e2;
+  color: #409eff;
 }
 
 :deep(.el-date-table td.current:not(.disabled)) {
-  background-color: #4a90e2;
+  background-color: #409eff;
   color: #ffffff;
 }
 
@@ -1149,7 +1165,7 @@ function handleRowClick(row, event) {
 
 .description-value {
   font-size: 14px;
-  color: #ffffff;
+  color: #303133;
   word-break: break-word;
 }
 
@@ -1157,44 +1173,49 @@ function handleRowClick(row, event) {
 .sub-part-records {
   margin-bottom: 24px;
   padding: 16px;
-  background-color: #34495e;
+  background-color: #ffffff;
   border-radius: 4px;
+  border: 1px solid #e4e7ed;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .sub-part-table {
   width: 100%;
   border-collapse: collapse;
-  background-color: #2c3e50;
+  background-color: #ffffff;
 }
 
 .sub-part-table th,
 .sub-part-table td {
   padding: 12px;
   text-align: left;
-  border-bottom: 1px solid #4a5568;
-  color: #ffffff;
+  border-bottom: 1px solid #e4e7ed;
+  color: #303133;
 }
 
 .sub-part-table th {
-  background-color: #34495e;
+  background-color: #fafafa;
   font-weight: 500;
-  color: #cbd5e0;
+  color: #606266;
 }
 
 .status-tag {
   padding: 4px 12px;
   border-radius: 12px;
   font-size: 12px;
+  border: 1px solid transparent;
 }
 
 .status-tag.success {
-  background-color: #27ae60;
-  color: #ffffff;
+  background-color: #f0f9eb;
+  color: #52c41a;
+  border-color: #b7eb8f;
 }
 
 .status-tag.danger {
-  background-color: #e74c3c;
-  color: #ffffff;
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border-color: #ffccc7;
 }
 
 /* 质量检验记录样式 */
@@ -1277,11 +1298,11 @@ h3 {
 }
 
 .info-card {
-  background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
+  background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
   border-radius: 8px;
   padding: 20px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border: 1px solid #4a5568;
+  border: 1px solid #e4e7ed;
 }
 
 .info-row {
@@ -1303,7 +1324,7 @@ h3 {
 
 .info-label {
   font-size: 13px;
-  color: #90a4ae;
+  color: #909399;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -1311,22 +1332,23 @@ h3 {
 
 .info-value {
   font-size: 15px;
-  color: #ffffff;
+  color: #303133;
   font-weight: 500;
   padding: 6px 0;
 }
 
 .trace-code {
   font-family: 'Consolas', 'Monaco', monospace;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: rgba(64, 158, 255, 0.1);
   padding: 8px 12px;
   border-radius: 4px;
-  border-left: 3px solid #3498db;
+  border-left: 3px solid #409eff;
+  color: #303133;
 }
 
 .product-name {
   font-size: 16px;
-  color: #3498db;
+  color: #409eff;
 }
 
 .status-badge {
@@ -1335,18 +1357,23 @@ h3 {
   border-radius: 20px;
   font-size: 13px;
   font-weight: 600;
-  background-color: #27ae60;
-  color: #ffffff;
+  background-color: #f0f9eb;
+  color: #52c41a;
   text-align: center;
   min-width: 70px;
+  border: 1px solid #b7eb8f;
 }
 
-.status-badge[data-status="不合格"] {
-  background-color: #e74c3c;
+.status-badge[data-status='不合格'] {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border-color: #ffccc7;
 }
 
-.status-badge[data-status="返工"] {
-  background-color: #f39c12;
+.status-badge[data-status='返工'] {
+  background-color: #fffbe6;
+  color: #faad14;
+  border-color: #ffe58f;
 }
 
 /* 表格容器样式 */
@@ -1388,12 +1415,12 @@ h3 {
 .quality-table {
   width: 100%;
   border-collapse: collapse;
-  background-color: #2c3e50;
+  background-color: #ffffff;
   table-layout: auto;
 }
 
 .quality-table thead {
-  background-color: #34495e;
+  background-color: #fafafa;
   position: sticky;
   top: 0;
   z-index: 10;
@@ -1404,8 +1431,8 @@ h3 {
   padding: 12px 10px;
   text-align: left;
   vertical-align: middle;
-  border: 1px solid #ffffff;
-  color: #ffffff !important;
+  border: 1px solid #e4e7ed;
+  color: #303133 !important;
   font-weight: 500;
   line-height: 1.5;
   white-space: nowrap;
@@ -1415,8 +1442,8 @@ h3 {
 
 .quality-table th {
   font-weight: 600;
-  color: #ffffff;
-  background-color: #34495e;
+  color: #606266;
+  background-color: #fafafa;
 }
 
 .quality-table tbody tr {
@@ -1424,7 +1451,7 @@ h3 {
 }
 
 .quality-table tbody tr:hover {
-  background-color: #34495e !important;
+  background-color: #f5f7fa !important;
   cursor: pointer;
 }
 
@@ -1437,4 +1464,4 @@ h3 {
   border-radius: 4px;
   margin-top: 16px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/yarn.lock b/yarn.lock
index c6054bf..9f0c438 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3199,6 +3199,14 @@ easy-stack@1.0.1:
   resolved "https://registry.npmmirror.com/easy-stack/-/easy-stack-1.0.1.tgz"
   integrity sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==
 
+echarts@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-6.0.0.tgz#2935aa7751c282d1abbbf7d719d397199a15b9e7"
+  integrity sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==
+  dependencies:
+    tslib "2.3.0"
+    zrender "6.0.0"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz"
@@ -6444,6 +6452,11 @@ ts-loader@^9.2.5:
     semver "^7.3.4"
     source-map "^0.7.4"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz"
@@ -6995,3 +7008,10 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zrender@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-6.0.0.tgz#947077bc69cdea744134984927f132f3727f8079"
+  integrity sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==
+  dependencies:
+    tslib "2.3.0"