将Area标题栏的蓝色渐变背景应用到TabPage标签页：1. 添加CSS变量定义蓝色渐变；2. 修改非激活状态标签为蓝色渐变背景；3. 调整文本颜色为白色；4. 更新悬停状态的渐变效果

AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue

@@ -69,6 +69,11 @@ const closeTab = (tabId) => {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
+:root {
+  --vs-blue-top: #4f72b3;
+  --vs-blue-bottom: #3c5a99;
+}
+
 /* 标签栏样式 - 模仿Windows Forms */
 .tab-header {
   display: flex;
@@ -88,13 +93,13 @@ const closeTab = (tabId) => {
   height: 26px;
   padding: 0 16px;
   margin-left: 1px;
-  background: #f0f0f0;
+  background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom));
   border: 1px solid #c7d2ea;
   border-bottom-color: #c7d2ea;
   border-radius: 3px 3px 0 0;
   cursor: pointer;
   white-space: nowrap;
-  color: #333;
+  color: white;
   font-size: 12px;
   user-select: none;
 }
@@ -105,15 +110,17 @@ const closeTab = (tabId) => {
   border-bottom-color: #ffffff;
   border-top-width: 2px;
   border-top-color: #0078d7;
+  color: #333;
   font-weight: 500;
 }
 
 .tab-item:hover {
-  background: #f5f5f5;
+  background: linear-gradient(to bottom, #5a7db8, #4667a4);
 }
 
 .tab-item.active:hover {
   background: #ffffff;
+  color: #333;
 }
 
 .tab-close {