perf: optimized the appearance
This commit is contained in:
parent
e2f33af1c7
commit
eb8f68b628
|
@ -101,6 +101,7 @@ const handleMouseOver = () => {
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
transition: background-color 0.3s ease-in;
|
transition: background-color 0.3s ease-in;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resize-divider-hide {
|
.resize-divider-hide {
|
||||||
|
|
|
@ -266,8 +266,8 @@ const onSave = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.pin-btn) {
|
:deep(.pin-btn) {
|
||||||
border-color: v-bind('themeVars.borderColor');
|
border-color: v-bind('themeVars.iconColorDisabled');
|
||||||
background-color: v-bind('themeVars.borderColor');
|
background-color: v-bind('themeVars.iconColorDisabled');
|
||||||
}
|
}
|
||||||
|
|
||||||
//:deep(.n-card--bordered) {
|
//:deep(.n-card--bordered) {
|
||||||
|
|
|
@ -13,8 +13,10 @@ import usePreferencesStore from 'stores/preferences.js'
|
||||||
import Record from '@/components/icons/Record.vue'
|
import Record from '@/components/icons/Record.vue'
|
||||||
import { extraTheme } from '@/utils/extra_theme.js'
|
import { extraTheme } from '@/utils/extra_theme.js'
|
||||||
import useBrowserStore from 'stores/browser.js'
|
import useBrowserStore from 'stores/browser.js'
|
||||||
|
import { useRender } from '@/utils/render.js'
|
||||||
|
|
||||||
const themeVars = useThemeVars()
|
const themeVars = useThemeVars()
|
||||||
|
const render = useRender()
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
value: {
|
value: {
|
||||||
|
@ -30,9 +32,6 @@ const props = defineProps({
|
||||||
const emit = defineEmits(['update:value'])
|
const emit = defineEmits(['update:value'])
|
||||||
|
|
||||||
const iconSize = computed(() => Math.floor(props.width * 0.45))
|
const iconSize = computed(() => Math.floor(props.width * 0.45))
|
||||||
const renderIcon = (icon) => {
|
|
||||||
return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 3 }) })
|
|
||||||
}
|
|
||||||
|
|
||||||
const browserStore = useBrowserStore()
|
const browserStore = useBrowserStore()
|
||||||
const i18n = useI18n()
|
const i18n = useI18n()
|
||||||
|
@ -62,12 +61,12 @@ const preferencesOptions = computed(() => {
|
||||||
{
|
{
|
||||||
label: i18n.t('menu.preferences'),
|
label: i18n.t('menu.preferences'),
|
||||||
key: 'preferences',
|
key: 'preferences',
|
||||||
icon: renderIcon(Config),
|
icon: render.renderIcon(Config, { strokeWidth: 3 }),
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
// label: i18n.t('menu.help'),
|
// label: i18n.t('menu.help'),
|
||||||
// key: 'help',
|
// key: 'help',
|
||||||
// icon: renderIcon(Help),
|
// icon: render.renderIcon(Help, { strokeWidth: 3 }),
|
||||||
// },
|
// },
|
||||||
{
|
{
|
||||||
label: i18n.t('menu.check_update'),
|
label: i18n.t('menu.check_update'),
|
||||||
|
@ -122,23 +121,21 @@ const exThemeVars = computed(() => {
|
||||||
}"
|
}"
|
||||||
class="flex-box-v">
|
class="flex-box-v">
|
||||||
<div class="ribbon-wrapper flex-box-v">
|
<div class="ribbon-wrapper flex-box-v">
|
||||||
|
<n-tooltip v-for="(m, i) in menuOptions" :key="i" :delay="2" :show-arrow="false" placement="right">
|
||||||
|
<template #trigger>
|
||||||
<div
|
<div
|
||||||
v-for="(m, i) in menuOptions"
|
|
||||||
v-show="m.show !== false"
|
v-show="m.show !== false"
|
||||||
:key="i"
|
|
||||||
:class="{ 'ribbon-item-active': props.value === m.key }"
|
:class="{ 'ribbon-item-active': props.value === m.key }"
|
||||||
class="ribbon-item clickable"
|
class="ribbon-item clickable"
|
||||||
@click="emit('update:value', m.key)">
|
@click="emit('update:value', m.key)">
|
||||||
<n-tooltip :delay="2" :show-arrow="false" placement="right">
|
|
||||||
<template #trigger>
|
|
||||||
<n-icon :size="iconSize">
|
<n-icon :size="iconSize">
|
||||||
<component :is="m.icon" :stroke-width="3.5" />
|
<component :is="m.icon" :stroke-width="3.5" />
|
||||||
</n-icon>
|
</n-icon>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
{{ m.label }}
|
{{ m.label }}
|
||||||
</n-tooltip>
|
</n-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="flex-item-expand"></div>
|
<div class="flex-item-expand"></div>
|
||||||
<div class="nav-menu-item flex-box-v">
|
<div class="nav-menu-item flex-box-v">
|
||||||
<n-dropdown
|
<n-dropdown
|
||||||
|
|
Loading…
Reference in New Issue