Skip to content

B
basic-vue-admin
提交 e79e540b 作者: vben
操作

perf(logo): optimize logo code

上级 69af37ec
正在显示 包含 56 行增加 和 46 行删除
package.json
......@@ -4,7 +4,7 @@
"scripts": {
"bootstrap": "yarn install",
"serve": "esno ./build/script/preserve.ts && cross-env NODE_ENV=development vite",
"build": " rimraf dist && cross-env NODE_ENV=production vite build && esno ./build/script/postBuild.ts",
"build": "cross-env NODE_ENV=production vite build && esno ./build/script/postBuild.ts",
"build:site": "cross-env SITE=true npm run build ",
"build:no-cache": "yarn clean:cache && npm run build",
"typecheck": "typecheck .",
......
src/components/Breadcrumb/Breadcrumb.vue
......@@ -73,7 +73,7 @@
&.is-link,
a {
font-weight: 700;
font-weight: 500;
color: @text-color-base;
text-decoration: none;
transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
......
src/components/Menu/src/SearchInput.vue
......@@ -48,7 +48,7 @@
const searchClass = computed(() => {
const cls: string[] = [];
cls.push(props.theme ? `menu-search-input__search--${props.theme}` : '');
// cls.push(props.collapsed ? 'hide-search-icon' : '');
cls.push(props.collapsed ? 'hide-search-icon' : '');
return cls;
});
......@@ -66,12 +66,13 @@
.menu-search-input {
margin: 12px 8px;
// &.hide-search-icon {
// .ant-input,
// .ant-input-suffix {
// opacity: 0;
// }
// }
&.hide-search-icon {
.ant-input,
.ant-input-suffix {
opacity: 0;
transition: all 0.5s;
}
}
&__search--dark {
.ant-input-affix-wrapper,
......
src/layouts/Logo.vue
<template>
<div class="app-logo" @click="handleGoHome" :style="wrapStyle">
<div class="app-logo anticon" @click="handleGoHome" :style="wrapStyle">
<img :src="logo" />
<div v-if="show" class="logo-title ml-2 ellipsis">{{ globSetting.title }}</div>
</div>
......@@ -79,14 +79,15 @@
align-items: center;
padding-left: 16px;
cursor: pointer;
justify-content: center;
// justify-content: center;
.logo-title {
display: none;
font-size: 16px;
font-size: 18px;
font-weight: 400;
opacity: 0;
transition: all 0.5s;
.respond-to(medium,{
display: block;
opacity: 1;
});
}
}
......
src/layouts/default/LayoutMenu.tsx
......@@ -196,7 +196,14 @@ export default defineComponent({
return () => {
const {
showLogo,
menuSetting: { type: menuType, mode, theme, collapsed, collapsedShowTitle },
menuSetting: {
type: menuType,
mode,
theme,
collapsed,
collapsedShowTitle,
collapsedShowSearch,
},
} = unref(getProjectConfigRef);
const isSidebarType = menuType === MenuTypeEnum.SIDEBAR;
......@@ -212,7 +219,7 @@ export default defineComponent({
collapsedShowTitle={collapsedShowTitle}
theme={themeData}
showLogo={isShowLogo}
search={unref(showSearchRef) && !collapsed}
search={unref(showSearchRef) && (collapsedShowSearch ? true : !collapsed)}
items={unref(menusRef)}
flatItems={unref(flatMenusRef)}
onClickSearchInput={handleClickSearchInput}
......@@ -222,10 +229,7 @@ export default defineComponent({
{{
header: () =>
isShowLogo && (
<Logo
showTitle={!collapsed}
class={[`layout-menu__logo`, collapsed ? 'justify-center' : '', themeData]}
/>
<Logo showTitle={!collapsed} class={[`layout-menu__logo`, themeData]} />
),
}}
</BasicMenu>
......
src/layouts/default/index.less
......@@ -42,7 +42,7 @@
.layout-menu {
&__logo {
height: @header-height;
padding: 10px 4px;
padding: 10px 4px 10px 10px;
img {
width: @logo-width;
......
src/settings/projectSetting.ts
......@@ -66,6 +66,8 @@ const setting: ProjectConfig = {
split: false,
// 顶部菜单布局
topMenuAlign: 'center',
// 折叠菜单时候隐藏搜索框
collapsedShowSearch: true,
},
// 消息配置
messageSetting: {
......
src/types/config.d.ts
......@@ -21,6 +21,7 @@ export interface MenuSetting {
type: MenuTypeEnum;
theme: MenuThemeEnum;
topMenuAlign: 'start' | 'center' | 'end';
collapsedShowSearch: boolean;
}
export interface MultiTabsSetting {
......
src/views/sys/login/Login.vue
......@@ -5,7 +5,7 @@
<div class="login-form mx-6">
<div class="login-form__content px-2 py-10">
<header>
<img src="/@/assets/images/logo.png" class="mr-4" />
<img :src="logo" class="mr-4" />
<h1>{{ title }}</h1>
</header>
......@@ -74,6 +74,7 @@
// import { appStore } from '/@/store/modules/app';
import { useMessage } from '/@/hooks/web/useMessage';
import { useSetting } from '/@/hooks/core/useSetting';
import logo from '/@/assets/images/logo.png';
export default defineComponent({
components: {
......@@ -149,6 +150,7 @@
autoLogin: autoLoginRef,
// openLoginVerify: openLoginVerifyRef,
title: globSetting && globSetting.title,
logo,
};
},
});
......
yarn.lock
......@@ -3331,9 +3331,9 @@ es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
string.prototype.trimstart "^1.0.1"
es-module-lexer@^0.3.25:
version "0.3.25"
resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.3.25.tgz#24a1abcb9c5dc96923a8e42be033b801f788de06"
integrity sha512-H9VoFD5H9zEfiOX2LeTWDwMvAbLqcAyA2PIb40TOAvGpScOjit02oTGWgIh+M0rx2eJOKyJVM9wtpKFVgnyC3A==
version "0.3.26"
resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.3.26.tgz#7b507044e97d5b03b01d4392c74ffeb9c177a83b"
integrity sha512-Va0Q/xqtrss45hWzP8CZJwzGSZJjDM5/MJRE3IXXnUCcVLElR9BRaE9F62BopysASyc4nM3uwhSW7FFB9nlWAA==
es-to-primitive@^1.2.1:
version "1.2.1"
......@@ -3354,11 +3354,16 @@ esbuild-register@^1.1.0:
source-map-support "^0.5.19"
strip-json-comments "^3.1.1"
esbuild@^0.7.17, esbuild@^0.7.19, esbuild@^0.7.21:
esbuild@^0.7.17, esbuild@^0.7.19:
version "0.7.21"
resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.7.21.tgz#e93f9d7e673cd5fcab2aab7774d489a0f680d657"
integrity sha512-qEnJdj+6Mdpt5kZwwCqO6PDNXSHNDDOPbnF4pduS3nub1v5GfgZfi8ysZ2DN4Q65WWgx6hz1a237ZETEHZpR0Q==
esbuild@^0.7.21:
version "0.7.22"
resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.7.22.tgz#9149b903f8128b7c45a754046c24199d76bbe08e"
integrity sha512-B43SYg8LGWYTCv9Gs0RnuLNwjzpuWOoCaZHTWEDEf5AfrnuDMerPVMdCEu7xOdhFvQ+UqfP2MGU9lxEy0JzccA==
escalade@^3.1.0, escalade@^3.1.1:
version "3.1.1"
resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
......@@ -3557,22 +3562,7 @@ eventemitter3@^4.0.0:
resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
execa@^4.0.3:
version "4.0.3"
resolved "https://registry.npmjs.org/execa/-/execa-4.0.3.tgz#0a34dabbad6d66100bd6f2c576c8669403f317f2"
integrity sha512-WFDXGHckXPWZX19t1kCsXzOpqX9LWYNqn4C+HqZlk/V0imTkzJZqf87ZBhvpHaftERYknpk0fjSylnXVlVgI0A==
dependencies:
cross-spawn "^7.0.0"
get-stream "^5.0.0"
human-signals "^1.1.1"
is-stream "^2.0.0"
merge-stream "^2.0.0"
npm-run-path "^4.0.0"
onetime "^5.1.0"
signal-exit "^3.0.2"
strip-final-newline "^2.0.0"
execa@^4.1.0:
execa@^4.0.3, execa@^4.1.0:
version "4.1.0"
resolved "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
......@@ -4830,7 +4820,7 @@ jest-worker@^24.9.0:
merge-stream "^2.0.0"
supports-color "^6.1.0"
jest-worker@^26.0.0, jest-worker@^26.2.1:
jest-worker@^26.0.0:
version "26.6.1"
resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.1.tgz#c2ae8cde6802cc14056043f997469ec170d9c32a"
integrity sha512-R5IE3qSGz+QynJx8y+ICEkdI2OJ3RJjRQVEyCcFAd3yVhQSEtquziPO29Mlzgn07LOVE8u8jhJ1FqcwegiXWOw==
......@@ -4839,6 +4829,15 @@ jest-worker@^26.0.0, jest-worker@^26.2.1:
merge-stream "^2.0.0"
supports-color "^7.0.0"
jest-worker@^26.2.1:
version "26.6.2"
resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
dependencies:
"@types/node" "*"
merge-stream "^2.0.0"
supports-color "^7.0.0"
joycon@^2.2.5:
version "2.2.5"
resolved "https://registry.npmjs.org/joycon/-/joycon-2.2.5.tgz#8d4cf4cbb2544d7b7583c216fcdfec19f6be1615"
......@@ -6902,9 +6901,9 @@ rollup-plugin-visualizer@^4.1.2:
yargs "^16.0.3"
rollup-plugin-vue@^6.0.0-beta.10:
version "6.0.0-beta.10"
resolved "https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0-beta.10.tgz#66d9b9a8dd2d085267d1cc398ea0113360879ac1"
integrity sha512-8TZJmROiSRjWoHRR6id0/ktOBOUGuI302xDBq4YBiA/tnnXdoY3oFGtvRWzT5ldX0jTJ8QX40rrJOw2SvcWwxQ==
version "6.0.0-beta.11"
resolved "https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0-beta.11.tgz#fdbc6b7484a361ef8c5e8009cef4a6bd45435013"
integrity sha512-osqLkFc7N76TOI0CeW0BOujlMFsMIoytyTRVUivaeYSMponNfk1iSuqyoeciUB3EjFqyL/dTTFPi+7rhaAm73w==
dependencies:
debug "^4.1.1"
hash-sum "^2.0.0"
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论