fix(components): 修复tab组件适应暗黑主题模式
This commit is contained in:
Soybean
parent
82e613ea26
commit
2fe3d27a36
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@ -4,9 +4,7 @@
|
||||
},
|
||||
"workbench.iconTheme": "material-icon-theme",
|
||||
"workbench.colorTheme": "One Dark Pro",
|
||||
"editor.fontSize": 22,
|
||||
"editor.tabSize": 2,
|
||||
"editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
|
||||
"editor.fontLigatures": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
@ -38,7 +36,6 @@
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"terminal.integrated.fontSize": 14,
|
||||
"terminal.integrated.fontFamily": "monospace",
|
||||
"terminal.integrated.fontWeight": 500,
|
||||
"i18n-ally.displayLanguage": "zh",
|
||||
"[html]": {
|
||||
|
||||
18
package.json
18
package.json
@ -18,12 +18,12 @@
|
||||
"*.{vue,js,jsx,ts,tsx}": "eslint --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/core": "^6.4.1",
|
||||
"@vueuse/core": "^6.5.3",
|
||||
"axios": "^0.21.4",
|
||||
"chroma-js": "^2.1.2",
|
||||
"dayjs": "^1.10.7",
|
||||
"form-data": "^4.0.0",
|
||||
"naive-ui": "^2.19.1",
|
||||
"naive-ui": "^2.19.2",
|
||||
"pinia": "^2.0.0-rc.4",
|
||||
"qs": "^6.10.1",
|
||||
"vue": "^3.2.10",
|
||||
@ -32,7 +32,7 @@
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^13.1.0",
|
||||
"@commitlint/config-conventional": "^13.1.0",
|
||||
"@iconify/json": "^1.1.405",
|
||||
"@iconify/json": "^1.1.406",
|
||||
"@iconify/vue": "^3.0.0",
|
||||
"@types/chroma-js": "^2.1.3",
|
||||
"@types/qs": "^6.9.7",
|
||||
@ -46,8 +46,8 @@
|
||||
"@vicons/ionicons5": "^0.11.0",
|
||||
"@vicons/material": "^0.11.0",
|
||||
"@vicons/tabler": "^0.11.0",
|
||||
"@vitejs/plugin-vue": "^1.9.0",
|
||||
"@vue/compiler-sfc": "^3.2.14",
|
||||
"@vitejs/plugin-vue": "^1.9.2",
|
||||
"@vue/compiler-sfc": "^3.2.19",
|
||||
"@vue/eslint-config-prettier": "^6.0.0",
|
||||
"@vue/eslint-config-typescript": "^7.0.0",
|
||||
"commitizen": "^4.2.4",
|
||||
@ -67,13 +67,13 @@
|
||||
"prettier": "^2.4.1",
|
||||
"sass": "^1.42.1",
|
||||
"typescript": "^4.4.3",
|
||||
"unplugin-icons": "^0.11.1",
|
||||
"unplugin-vue-components": "^0.15.2",
|
||||
"unplugin-icons": "^0.11.4",
|
||||
"unplugin-vue-components": "^0.15.4",
|
||||
"vite": "^2.5.10",
|
||||
"vite-plugin-html": "^2.1.0",
|
||||
"vite-plugin-windicss": "^1.4.4",
|
||||
"vite-plugin-windicss": "^1.4.7",
|
||||
"vue-tsc": "^0.3.0",
|
||||
"vueuc": "^0.4.10",
|
||||
"vueuc": "^0.4.12",
|
||||
"windicss": "^3.1.7"
|
||||
},
|
||||
"config": {
|
||||
|
||||
958
pnpm-lock.yaml
958
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -1,10 +1,14 @@
|
||||
<template>
|
||||
<!--删除 bg-white 黑暗模式正常-->
|
||||
<div
|
||||
class="relative flex-center h-30px pl-14px border-1px border-[#e5e7eb] rounded-2px cursor-pointer"
|
||||
class="relative flex-center h-30px pl-14px border-1px 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 }
|
||||
active || isHover
|
||||
? 'text-primary border-primary border-opacity-30'
|
||||
: darkMode
|
||||
? 'border-[#ffffff3d]'
|
||||
: 'border-[#e5e7eb]',
|
||||
{ 'bg-primary bg-opacity-10': active }
|
||||
]"
|
||||
@mouseenter="setTrue"
|
||||
@mouseleave="setFalse"
|
||||
@ -30,6 +34,10 @@ defineProps({
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
darkMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
@ -26,19 +26,10 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
/** 填充的背景颜色： [默认颜色, 暗黑主题颜色] */
|
||||
type FillColor = [string, string];
|
||||
|
||||
const props = defineProps({
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: 'rgba(14,118,226,0.45)' // 修改原色 黑暗模式和亮色模式均可用
|
||||
},
|
||||
hoverColor: {
|
||||
type: String,
|
||||
default: 'rgba(51,99,152,0.17)'
|
||||
},
|
||||
defaultColor: {
|
||||
type: String,
|
||||
default: 'rgba(14,118,226,0.13)'
|
||||
},
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@ -46,15 +37,25 @@ const props = defineProps({
|
||||
isHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
darkMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const defaultColor: FillColor = ['#fff', '#18181c'];
|
||||
const activeColor: FillColor = ['#eef6ff', '#1e3044'];
|
||||
const hoverColor: FillColor = ['#dee1e6', '#3f3c37'];
|
||||
|
||||
const fill = computed(() => {
|
||||
let color = props.defaultColor;
|
||||
const index = Number(props.darkMode);
|
||||
let color = defaultColor[index];
|
||||
if (props.isActive) {
|
||||
color = props.activeColor;
|
||||
} else if (props.isHover) {
|
||||
color = props.hoverColor;
|
||||
color = activeColor[index];
|
||||
}
|
||||
if (props.isHover) {
|
||||
color = hoverColor[index];
|
||||
}
|
||||
return color;
|
||||
});
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
@mouseleave="setFalse"
|
||||
>
|
||||
<div class="absolute-lb w-full h-full overflow-hidden">
|
||||
<svg-radius-bg class="w-full h-full" :is-active="isActive" :is-hover="isHover" />
|
||||
<svg-radius-bg class="w-full h-full" :is-active="isActive" :is-hover="isHover" :dark-mode="darkMode" />
|
||||
</div>
|
||||
<span class="relative z-2">
|
||||
<slot></slot>
|
||||
@ -14,13 +14,12 @@
|
||||
<div v-if="closable" class="pl-18px">
|
||||
<icon-close :is-primary="isActive" @click="handleClose" />
|
||||
</div>
|
||||
<!-- 删除divder防止不和谐 -->
|
||||
<!-- <n-divider v-if="!isHover && !isActive" :vertical="true" class="absolute right-0 !bg-[#a4abb8] z-2" /> -->
|
||||
<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';
|
||||
@ -33,6 +32,10 @@ defineProps({
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
darkMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
:key="item.path"
|
||||
:is-active="app.multiTab.activeRoute === item.fullPath"
|
||||
:closable="item.name !== ROUTE_HOME.name"
|
||||
:dark-mode="theme.darkMode"
|
||||
@click="handleClickTab(item.fullPath)"
|
||||
@close="removeMultiTab(item.fullPath)"
|
||||
@contextmenu="handleContextMenu($event, item.fullPath)"
|
||||
@ -19,6 +20,7 @@
|
||||
class="mr-10px"
|
||||
:active="app.multiTab.activeRoute === item.fullPath"
|
||||
:closable="item.name !== ROUTE_HOME.name"
|
||||
:dark-mode="theme.darkMode"
|
||||
@click="handleClickTab(item.fullPath)"
|
||||
@close="removeMultiTab(item.fullPath)"
|
||||
@contextmenu="handleContextMenu($event, item.fullPath)"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="bg-white">
|
||||
<div>
|
||||
<n-spin class="flex-y-center flex-col" :show="loading">
|
||||
<n-gradient-text type="primary" size="32">工作台</n-gradient-text>
|
||||
<n-space>
|
||||
@ -10,13 +10,17 @@
|
||||
<n-button type="warning">Warning</n-button>
|
||||
<n-button type="error">Error</n-button>
|
||||
</n-space>
|
||||
<n-space>
|
||||
<n-tag>Tag</n-tag>
|
||||
<n-tag type="primary">Primary Tag</n-tag>
|
||||
</n-space>
|
||||
</n-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { NGradientText, NSpace, NButton, NSpin } from 'naive-ui';
|
||||
import { NGradientText, NSpace, NButton, NSpin, NTag } from 'naive-ui';
|
||||
|
||||
const loading = ref(true);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user