Merge pull request #1 from lingdu1234/main

fix(components): tab组件在黑暗模式下泛白的颜色问题以及chromeTab的重叠问题
This commit is contained in:
达超 2021-09-25 22:47:25 +08:00 committed by GitHub
commit 82e613ea26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 10 deletions

View File

@ -4,7 +4,7 @@
},
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "One Dark Pro",
"editor.fontSize": 15,
"editor.fontSize": 22,
"editor.tabSize": 2,
"editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,
@ -38,7 +38,7 @@
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"terminal.integrated.fontSize": 14,
"terminal.integrated.fontFamily": "Fira Code",
"terminal.integrated.fontFamily": "monospace",
"terminal.integrated.fontWeight": 500,
"i18n-ally.displayLanguage": "zh",
"[html]": {

View File

@ -1,6 +1,7 @@
<template>
<!--删除 bg-white 黑暗模式正常-->
<div
class="relative flex-center h-30px pl-14px bg-white border-1px border-[#e5e7eb] rounded-2px cursor-pointer"
class="relative flex-center h-30px pl-14px border-1px border-[#e5e7eb] rounded-2px cursor-pointer"
:class="[
closable ? 'pr-6px' : 'pr-14px',
{ 'text-primary bg-primary bg-opacity-10 !border-primary': active, 'text-primary border-primary': isHover }

View File

@ -11,11 +11,12 @@
<rect width="100%" height="100%" x="0"></rect>
</clipPath>
</defs>
<svg width="52%" height="100%">
<!-- 修改为50%防止重叠颜色不一致 -->
<svg width="50%" height="100%">
<use xlink:href="#geometry-left" width="214" height="36" :fill="fill"></use>
</svg>
<g transform="scale(-1, 1)">
<svg width="52%" height="100%" x="-100%" y="0">
<svg width="50%" height="100%" x="-100%" y="0">
<use xlink:href="#geometry-right" width="214" height="36" :fill="fill"></use>
</svg>
</g>
@ -28,15 +29,15 @@ import { computed } from 'vue';
const props = defineProps({
activeColor: {
type: String,
default: '#eef6ff'
default: 'rgba(14,118,226,0.45)' //
},
hoverColor: {
type: String,
default: '#dee1e6'
default: 'rgba(51,99,152,0.17)'
},
defaultColor: {
type: String,
default: '#fff'
default: 'rgba(14,118,226,0.13)'
},
isActive: {
type: Boolean,

View File

@ -14,12 +14,13 @@
<div v-if="closable" class="pl-18px">
<icon-close :is-primary="isActive" @click="handleClose" />
</div>
<n-divider v-if="!isHover && !isActive" :vertical="true" class="absolute right-0 !bg-[#a4abb8] z-2" />
<!-- 删除divder防止不和谐 -->
<!-- <n-divider v-if="!isHover && !isActive" :vertical="true" class="absolute right-0 !bg-[#a4abb8] z-2" /> -->
</div>
</template>
<script setup lang="ts">
import { NDivider } from 'naive-ui';
// import { NDivider } from 'naive-ui';
import { useBoolean } from '@/hooks';
import IconClose from '../IconClose/index.vue';
import { SvgRadiusBg } from './components';