From f87cfaedf790ef30ced1f79a4ebbd09577652e7e Mon Sep 17 00:00:00 2001
From: gary <xuebaiyouling@gmail.com>
Date: Sun, 1 Feb 2026 14:57:19 +0800
Subject: [PATCH] =?UTF-8?q?opt:=20=E4=BC=98=E5=8C=96=E5=A4=9A=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common-tabs-view/index.vue | 91 ++++++++++++++++++++++-
 1 file changed, 90 insertions(+), 1 deletion(-)

diff --git a/src/components/common-tabs-view/index.vue b/src/components/common-tabs-view/index.vue
index 7d1ba57..5af0def 100644
--- a/src/components/common-tabs-view/index.vue
+++ b/src/components/common-tabs-view/index.vue
@@ -121,7 +121,96 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.common-tabs .el-tabs__header {
+:deep(.el-tabs__header) {
   margin: 0;
+  border-bottom: 1px solid var(--el-border-color-light) !important;
+  position: relative;
+}
+
+:deep(.el-tabs__nav) {
+  border: 0 !important;
+}
+
+/* Allow pseudo-elements to overflow and cover the header border */
+:deep(.el-tabs__nav-wrap),
+:deep(.el-tabs__nav-scroll) {
+  overflow: visible !important;
+}
+
+:deep(.el-tabs__item) {
+  border: 1px solid transparent !important;
+  margin: 0 4px 0 0;
+  border-radius: 4px 4px 0 0;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  /* Default inactive background */
+  background-color: var(--el-fill-color-light);
+}
+
+/* Bottom border for inactive tabs */
+:deep(.el-tabs__item:not(.is-active)) {
+  border-bottom: 1px solid var(--el-border-color-light) !important;
+}
+
+/* Specific styling for active tab to look "connected" to content */
+:deep(.el-tabs__item.is-active) {
+  background-color: var(--el-bg-color);
+  border-left: 1px solid var(--el-border-color-light) !important;
+  border-right: 1px solid var(--el-border-color-light) !important;
+  border-top: 1px solid var(--el-border-color-light) !important;
+  border-bottom: 1px solid transparent !important;
+  position: relative;
+  font-weight: 600;
+}
+
+/* Cover the header bottom border under active tab */
+:deep(.el-tabs__item.is-active)::before {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background-color: var(--el-bg-color);
+  z-index: 10;
+}
+
+/* Top highlight line for active tab */
+:deep(.el-tabs__item.is-active)::after {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  width: calc(100% + 2px);
+  height: 2px;
+  background-color: var(--el-color-primary);
+  border-radius: 4px 4px 0 0;
+}
+
+:deep(.el-tabs__item:not(.is-active):hover) {
+  background-color: var(--el-fill-color);
+  color: var(--el-color-primary);
+}
+
+/* Dark mode adjustments */
+.dark :deep(.el-tabs__header) {
+  border-bottom: 1px solid var(--el-border-color-darker) !important;
+}
+
+.dark :deep(.el-tabs__item) {
+  background-color: var(--el-bg-color-overlay);
+}
+
+.dark :deep(.el-tabs__item:not(.is-active)) {
+  border-bottom: 1px solid var(--el-border-color-darker) !important;
+}
+
+.dark :deep(.el-tabs__item.is-active) {
+  background-color: var(--el-bg-color);
+  border-color: var(--el-border-color-darker) !important;
+  border-bottom-color: transparent !important;
+}
+
+.dark :deep(.el-tabs__item.is-active)::before {
+  background-color: var(--el-bg-color);
 }
 </style>