feat: add chrome style page indictor

pure-admin · May 29, 2024 · c3a2959 · c3a2959
1 parent 1e6d028
commit c3a2959
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 23 deletions.
diff --git a/locales/en.yaml b/locales/en.yaml
@@ -53,6 +53,8 @@ panel:
   pureTagsStyleSmartTip: Smart tags add fun and brilliance
   pureTagsStyleCard: Card
   pureTagsStyleCardTip: Card tags for efficient browsing
+  pureTagsStyleChrome: Chrome
+  pureTagsStyleChromeTip: Chrome style is classic and elegant
   pureInterfaceDisplay: Interface Display
   pureGreyModel: Grey Model
   pureWeakModel: Weak Model

diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
@@ -53,6 +53,8 @@ panel:
   pureTagsStyleSmartTip: 灵动标签，添趣生辉
   pureTagsStyleCard: 卡片
   pureTagsStyleCardTip: 卡片标签，高效浏览
+  pureTagsStyleChrome: 谷歌
+  pureTagsStyleChromeTip: 谷歌风格，经典美观
   pureInterfaceDisplay: 界面显示
   pureGreyModel: 灰色模式
   pureWeakModel: 色弱模式

diff --git a/src/layout/components/lay-setting/index.vue b/src/layout/components/lay-setting/index.vue
@@ -232,6 +232,11 @@ const markOptions = computed<Array<OptionsType>>(() => {
       label: t("panel.pureTagsStyleCard"),
       tip: t("panel.pureTagsStyleCardTip"),
       value: "card"
+    },
+    {
+      label: t("panel.pureTagsStyleChrome"),
+      tip: t("panel.pureTagsStyleChromeTip"),
+      value: "chrome"
     }
   ];
 });
@@ -442,7 +447,7 @@ onUnmounted(() => removeMatchMedia);
       <Segmented
         resize
         class="select-none"
-        :modelValue="markValue === 'smart' ? 0 : 1"
+        :modelValue="markValue === 'smart' ? 0 : markValue === 'card' ? 1 : 2"
         :options="markOptions"
         @change="onChange"
       />

diff --git a/src/layout/components/lay-tag/chrome-tab-bg.vue b/src/layout/components/lay-tag/chrome-tab-bg.vue
@@ -0,0 +1,33 @@
+<template>
+  <svg class="w-full h-full">
+    <defs>
+      <symbol id="geometry-left" viewBox="0 0 214 36">
+        <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z" />
+      </symbol>
+      <symbol id="geometry-right" viewBox="0 0 214 36">
+        <use xlink:href="#geometry-left" />
+      </symbol>
+      <clipPath>
+        <rect width="100%" height="100%" x="0" />
+      </clipPath>
+    </defs>
+    <svg width="51%" height="100%">
+      <use
+        xlink:href="#geometry-left"
+        width="214"
+        height="36"
+        fill="currentColor"
+      />
+    </svg>
+    <g transform="scale(-1, 1)">
+      <svg width="51%" height="100%" x="-100%" y="0">
+        <use
+          xlink:href="#geometry-right"
+          width="214"
+          height="36"
+          fill="currentColor"
+        />
+      </svg>
+    </g>
+  </svg>
+</template>
diff --git a/src/layout/components/lay-tag/index.scss b/src/layout/components/lay-tag/index.scss
@@ -41,6 +41,13 @@
       padding-right: 24px;
     }
 
+    &.chrome-item {
+      padding-right: 0;
+      padding-left: 0;
+      margin-right: -18px;
+      box-shadow: none;
+    }
+
     .el-icon-close {
       position: absolute;
       top: 50%;
@@ -76,6 +83,10 @@
     overflow: hidden;
     white-space: nowrap;
 
+    &.chrome-scroll-container {
+      padding-top: 6px;
+    }
+
     .tab {
       position: relative;
       float: left;
@@ -86,6 +97,12 @@
       .scroll-item {
         transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 
+        &.chrome-item {
+          &:nth-child(1) {
+            padding-right: 0;
+          }
+        }
+
         &:nth-child(1) {
           padding: 0 12px;
         }
@@ -173,9 +190,21 @@
   color: #fff;
   box-shadow: 0 0 0.7px #888;
 
+  .chrome-tab__bg {
+    color: var(--el-color-primary-light-9) !important;
+  }
+
   .tag-title {
     color: var(--el-color-primary) !important;
   }
+
+  .chrome-close-btn {
+    color: var(--el-color-primary);
+
+    &:hover {
+      background-color: var(--el-color-primary);
+    }
+  }
 }
 
 .arrow-left,
@@ -262,3 +291,55 @@
   background: var(--el-color-primary);
   animation: schedule-out-width 200ms ease-in;
 }
+
+/* 谷歌风格的页签 */
+.chrome-tab {
+  position: relative;
+  display: inline-flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 24px;
+  white-space: nowrap;
+  cursor: pointer;
+
+  .tag-title {
+    padding: 0;
+  }
+
+  &:hover {
+    .chrome-tab__bg {
+      color: #dee1e6;
+    }
+
+    .tag-title {
+      color: #1f1f1f;
+    }
+  }
+
+  .chrome-tab__bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -10;
+    width: 100%;
+    height: 100%;
+    color: transparent;
+    pointer-events: none;
+  }
+
+  .chrome-close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    color: #666;
+    border-radius: 50%;
+
+    &:hover {
+      color: white;
+      background-color: #b1b3b8;
+    }
+  }
+}
diff --git a/src/layout/components/lay-tag/index.vue b/src/layout/components/lay-tag/index.vue
@@ -23,6 +23,8 @@ import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
 import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
 import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
 
+import ChromeTabBg from "./chrome-tab-bg.vue";
+
 const {
   Close,
   route,
@@ -565,6 +567,7 @@ onBeforeUnmount(() => {
     <div
       ref="scrollbarDom"
       class="scroll-container"
+      :class="showModel === 'chrome' && 'chrome-scroll-container'"
       @wheel.prevent="handleWheel"
     >
       <div ref="tabDom" class="tab select-none" :style="getTabStyle">
@@ -575,35 +578,53 @@ onBeforeUnmount(() => {
           :class="[
             'scroll-item is-closable',
             linkIsActive(item),
+            showModel === 'chrome' && 'chrome-item',
             !isAllEmpty(item?.meta?.fixedTag) && 'fixed-tag'
           ]"
           @contextmenu.prevent="openMenu(item, $event)"
           @mouseenter.prevent="onMouseenter(index)"
           @mouseleave.prevent="onMouseleave(index)"
           @click="tagOnClick(item)"
         >
-          <span
-            class="tag-title dark:!text-text_color_primary dark:hover:!text-primary"
-          >
-            {{ transformI18n(item.meta.title) }}
-          </span>
-          <span
-            v-if="
-              isAllEmpty(item?.meta?.fixedTag)
-                ? iconIsActive(item, index) ||
-                  (index === activeIndex && index !== 0)
-                : false
-            "
-            class="el-icon-close"
-            @click.stop="deleteMenu(item)"
-          >
-            <IconifyIconOffline :icon="Close" />
-          </span>
-          <span
-            v-if="showModel !== 'card'"
-            :ref="'schedule' + index"
-            :class="[scheduleIsActive(item)]"
-          />
+          <template v-if="showModel !== 'chrome'">
+            <span
+              class="tag-title dark:!text-text_color_primary dark:hover:!text-primary"
+            >
+              {{ transformI18n(item.meta.title) }}
+            </span>
+            <span
+              v-if="
+                isAllEmpty(item?.meta?.fixedTag)
+                  ? iconIsActive(item, index) ||
+                    (index === activeIndex && index !== 0)
+                  : false
+              "
+              class="el-icon-close"
+              @click.stop="deleteMenu(item)"
+            >
+              <IconifyIconOffline :icon="Close" />
+            </span>
+            <span
+              v-if="showModel !== 'card'"
+              :ref="'schedule' + index"
+              :class="[scheduleIsActive(item)]"
+            />
+          </template>
+          <div v-else class="chrome-tab">
+            <div class="chrome-tab__bg">
+              <ChromeTabBg />
+            </div>
+            <span class="tag-title">
+              {{ transformI18n(item.meta.title) }}
+            </span>
+            <span
+              v-if="index !== 0"
+              class="chrome-close-btn"
+              @click.stop="deleteMenu(item)"
+            >
+              <IconifyIconOffline :icon="Close" />
+            </span>
+          </div>
         </div>
       </div>
     </div>