fix: 处理打包警告,处理命名问题

2026-07-30 17:16:29 +08:00
parent c57273296f
commit 6b7a0fd284
6 changed files with 66 additions and 13 deletions
@@ -0,0 +1,229 @@
+@primary: #1677ff;
+
+.pageTabsWrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .navBtn {
+    position: absolute;
+    top: 50%;
+    z-index: 5;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 6px;
+    background: #fff;
+    color: rgba(0, 0, 0, 0.45);
+    box-shadow: 0 0 4px rgba(214, 214, 214, 0.9);
+    cursor: pointer;
+    transform: translateY(-50%);
+    transition:
+      color 0.15s,
+      background-color 0.15s;
+
+    &:hover {
+      color: rgba(0, 0, 0, 0.88);
+      background: #f5f5f5;
+    }
+
+    &:active {
+      color: rgba(0, 0, 0, 0.88);
+      background: #ebebeb;
+    }
+  }
+
+  .navBtnLeft {
+    left: 0;
+  }
+
+  .navBtnRight {
+    right: 0;
+  }
+
+  .pageTabs {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .tabItem {
+      position: relative;
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      height: 100%;
+      user-select: none;
+      transition: all 0.15s ease;
+
+      &:not(:first-child) {
+        margin-left: -10px;
+      }
+
+      &:global(:not(.dragging)) {
+        cursor: pointer;
+      }
+
+      &:not(.tabItemActive) {
+        &:hover {
+          > .divider {
+            opacity: 0;
+          }
+
+          & + .tabItem {
+            > .divider {
+              opacity: 0;
+            }
+          }
+
+          .tabContent {
+            background-color: rgba(0, 0, 0, 0.06);
+          }
+        }
+
+        .tabClose:hover {
+          color: rgba(0, 0, 0, 0.85);
+        }
+      }
+
+      &.tabItemActive {
+        z-index: 2;
+
+        & + .tabItem {
+          > .divider {
+            opacity: 0 !important;
+          }
+        }
+
+        .tabTitle {
+          color: @primary;
+          font-weight: 500;
+        }
+
+        .tabIcon {
+          color: @primary;
+        }
+
+        .tabBg {
+          &.tabBgActive {
+            .tabBgInner {
+              background-color: fade(@primary, 8%);
+            }
+
+            .tabBgCurveBefore,
+            .tabBgCurveAfter {
+              fill: fade(@primary, 8%);
+            }
+          }
+        }
+      }
+    }
+
+    .divider {
+      position: absolute;
+      left: 8px;
+      top: 50%;
+      z-index: 0;
+      width: 1px;
+      height: 18px;
+      background-color: #e8e8e8;
+      transform: translateY(-50%);
+      transition: opacity 0.15s;
+    }
+
+    .tabBg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      padding: 0 calc(8px - 1px);
+      transition: opacity 0.15s;
+    }
+
+    .tabBgInner {
+      height: 100%;
+      border-radius: 8px 8px 0 0;
+      transition:
+        background-color 0.15s,
+        margin 0.15s,
+        border-radius 0.15s;
+    }
+
+    .tabBgCurveBefore {
+      position: absolute;
+      left: -1px;
+      bottom: 0;
+      fill: transparent;
+      transition: fill 0.15s;
+    }
+
+    .tabBgCurveAfter {
+      position: absolute;
+      right: -1px;
+      bottom: 0;
+      fill: transparent;
+      transition: fill 0.15s;
+    }
+
+    .tabContent {
+      position: relative;
+      height: 34px;
+      z-index: 2;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      width: fit-content;
+      flex-shrink: 0;
+      margin: 0 12px;
+      padding: 4px 4px 4px 10px;
+      border-radius: 9px;
+      transition: background-color 0.35s;
+    }
+
+    .tabIcon {
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+      color: rgba(0, 0, 0, 0.45);
+      line-height: 1;
+      font-size: 16px;
+    }
+
+    .tabTitle {
+      min-width: 0;
+      max-width: 160px;
+      font-size: 14px;
+      line-height: 1.4;
+      color: rgba(0, 0, 0, 0.65);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .tabClose {
+      flex-shrink: 0;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      font-size: 11px;
+      text-align: center;
+      color: rgba(0, 0, 0, 0.45);
+      border-radius: 50%;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+  }
+}