diff --git a/locales/en.yaml b/locales/en.yaml index 37b95a9407..d02f36f933 100644 --- 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 index 0412b0ff86..6ce4209696 100644 --- 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 index b4c8b7fa0b..18aacf256e 100644 --- a/src/layout/components/lay-setting/index.vue +++ b/src/layout/components/lay-setting/index.vue @@ -232,6 +232,11 @@ const markOptions = computed>(() => { 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); diff --git a/src/layout/components/lay-tag/chrome-tab-bg.vue b/src/layout/components/lay-tag/chrome-tab-bg.vue new file mode 100644 index 0000000000..137365b462 --- /dev/null +++ b/src/layout/components/lay-tag/chrome-tab-bg.vue @@ -0,0 +1,33 @@ + diff --git a/src/layout/components/lay-tag/index.scss b/src/layout/components/lay-tag/index.scss index cc122dd2e8..b47fd480f4 100644 --- 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 index fa74ee9352..44879285cf 100644 --- 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(() => {
@@ -575,6 +578,7 @@ onBeforeUnmount(() => { :class="[ 'scroll-item is-closable', linkIsActive(item), + showModel === 'chrome' && 'chrome-item', !isAllEmpty(item?.meta?.fixedTag) && 'fixed-tag' ]" @contextmenu.prevent="openMenu(item, $event)" @@ -582,28 +586,45 @@ onBeforeUnmount(() => { @mouseleave.prevent="onMouseleave(index)" @click="tagOnClick(item)" > - - {{ transformI18n(item.meta.title) }} - - - - - + +
+
+ +
+ + {{ transformI18n(item.meta.title) }} + + + + +