style: 调整主题,修改子系统切换的样式,略微调整系统导航栏的高度

This commit is contained in:
gaoyunqi
2024-02-24 12:52:09 +08:00
parent 96ed35405b
commit 72936bc553
7 changed files with 13 additions and 31 deletions

6
.env
View File

@ -2,10 +2,10 @@
VITE_PORT = 3100
# spa-title
VITE_GLOB_APP_TITLE = Learun Pro
VITE_GLOB_APP_TITLE = 全代码平台
# spa shortname
VITE_GLOB_APP_SHORT_NAME = learun_admin
VITE_GLOB_APP_SHORT_NAME = 全代码平台
# 应用名称
VITE_SYSTEM_NAME = 数字新能源
VITE_SYSTEM_NAME = 全代码平台

View File

@ -8,7 +8,7 @@
@multiple-height: 40px;
// headers
@header-height: 60px;
@header-height: 50px;
// logo width
@logo-width: 36px;

View File

@ -1,4 +1,4 @@
import { watch, unref } from 'vue';
import { watch, unref, ref } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useTitle as usePageTitle } from '@vueuse/core';
import { useGlobSetting } from '/@/hooks/setting';
@ -11,7 +11,7 @@ import { REDIRECT_NAME } from '/@/router/constant';
* Listening to page changes and dynamically changing site titles
*/
export function useTitle() {
const { title } = useGlobSetting();
const title = import.meta.env.VITE_SYSTEM_NAME;
const { t } = useI18n();
const { currentRoute } = useRouter();
const localeStore = useLocaleStore();
@ -29,8 +29,8 @@ export function useTitle() {
const tTitle = t(route?.meta?.title as string);
pageTitle.value = tTitle
? ` ${tTitle} - ${appStore.getLogoConfig.shortName || title} `
: `${appStore.getLogoConfig.shortName || title}`;
? ` ${tTitle} - ${title} `
: `${title}`;
},
{ immediate: true },
);

View File

@ -3,22 +3,9 @@
v-if="getShowContent && getShowBread"
:selectedKeys="cur"
mode="horizontal"
:theme="Mtheme"
:class="[prefixCls, `${prefixCls}--${theme}`]"
>
<MenuItem v-for="item in system" :key="item.id" class="item-system">
<template #icon>
<Tooltip>
<template #title>{{ item.name }}</template>
<Icon
:icon="item.icon || 'ant-design:appstore-outlined'"
color="#DEDFFF"
size="26"
style="vertical-align: -7px"
@click="changeSystem(item.id)"
/>
</Tooltip>
</template>
<MenuItem v-for="item in system" @click="changeSystem(item.id)" :key="item.id" class="item-system">
{{ item.name }}
</MenuItem>
</AMenu>
@ -143,7 +130,7 @@
border: 0;
.ant-menu-item {
padding: 0;
padding: 0 10px;
&:hover {
background: none;
@ -158,10 +145,6 @@
margin: 0 5px;
padding: 6px;
}
.ant-menu-title-content {
display: none;
}
}
.ant-menu-item-selected {

View File

@ -2,7 +2,7 @@
<Dropdown :overlayClassName="`${prefixCls}-dropdown-overlay`" placement="bottomRight">
<span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
<span style="border-left: 1px solid rgb(255 255 255 / 30%); height: 30px; padding-right: 15px"></span>
<div style="margin-right: 12px; height: 30px; margin-top: -12px">
<div style="margin-right: 12px; height: 30px; margin-top: -10px">
<a-image :height="24" :src="getUserInfo.avatar" :width="24" fallback="src/assets/images/header.jpg" />
</div>
<span :class="`${prefixCls}__info hidden md:block`">

View File

@ -34,7 +34,6 @@ export function initAppConfigStore() {
grayMode,
themeColor,
headerSetting: { bgColor: headerBgColor } = {},
menuSetting: { bgColor } = {},
} = projCfg;
try {
@ -55,7 +54,7 @@ export function initAppConfigStore() {
updateHeaderBgColor();
updateSidebarBgColor();
} else {
headerBgColor && updateHeaderBgColor(headerBgColor);
updateHeaderBgColor('#ffffff'); // 强制顶部使用白色
bgColor && updateSidebarBgColor(bgColor);
}
// init store

View File

@ -5,7 +5,7 @@ export const prefixCls = 'vben';
export const darkMode = ThemeEnum.LIGHT;
// app theme preset color
export const APP_PRESET_COLOR_LIST: string[] = ['#5e95ff', '#0960bd', '#0084f4', '#009688', '#536dfe', '#ff5c93', '#ee4f12', '#0096c7', '#9c27b0', '#ff9800'];
export const APP_PRESET_COLOR_LIST: string[] = ['#1179FF', '#0960bd', '#0084f4', '#009688', '#536dfe', '#ff5c93', '#ee4f12', '#0096c7', '#9c27b0', '#ff9800'];
// header preset color
export const HEADER_PRESET_BG_COLOR_LIST: string[] = ['#07093E', '#ffffff', '#151515', '#009688', '#5172DC', '#018ffb', '#409eff', '#e74c3c', '#24292e', '#394664', '#001529', '#383f45'];