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