-
+
-
+
- Archer
+ Archer
diff --git a/src/config/app.ts b/src/config/app.ts
index 6cc14084f..843c1a2c5 100644
--- a/src/config/app.ts
+++ b/src/config/app.ts
@@ -2,7 +2,7 @@ import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
-export type LayoutType = 'classic' | 'leftTop' | 'top' | 'test'
+export type LayoutType = 'classic' | 'topLeft' | 'leftTop' | 'top' | 'test'
export interface AppState {
breadcrumb: boolean
@@ -14,6 +14,7 @@ export interface AppState {
locale: boolean
tagsView: boolean
logo: boolean
+ fixedHeader: boolean
greyMode: boolean
layout: LayoutType
@@ -37,9 +38,10 @@ export const appModules: AppState = {
locale: true, // 多语言图标
tagsView: true, // 标签页
logo: true, // logo
+ fixedHeader: true, // 固定toolheader
greyMode: false, // 是否开始灰色模式，用于特殊悼念日
- layout: 'classic', // layout布局
+ layout: wsCache.get('layout') || 'classic', // layout布局
title: 'butterfly-admin', // 标题
logoTitle: 'ButterflyAdmin', // logo标题
userInfo: 'userInfo', // 登录信息存储字段-建议每个项目换一个字段，避免与其他项目冲突
@@ -67,6 +69,12 @@ export const appModules: AppState = {
// logo字体颜色
logoTitleTextColor: '#fff',
// logo边框颜色
- logoBorderColor: 'inherit'
+ logoBorderColor: 'inherit',
+ // 头部背景颜色
+ topHeaderBgColor: '#fff',
+ // 头部字体颜色
+ topHeaderTextColor: 'inherit',
+ // 头部悬停颜色
+ topHeaderHoverColor: '#f6f6f6'
}
}
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index ccf6a2bdb..e7c7cdca7 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -1,100 +1,50 @@
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/src/layout/components/ToolHeader.vue b/src/layout/components/ToolHeader.vue
new file mode 100644
index 000000000..fd524e136
--- /dev/null
+++ b/src/layout/components/ToolHeader.vue
@@ -0,0 +1,71 @@
+
+
+
diff --git a/src/layout/components/useRenderLayout.tsx b/src/layout/components/useRenderLayout.tsx
new file mode 100644
index 000000000..4cc331541
--- /dev/null
+++ b/src/layout/components/useRenderLayout.tsx
@@ -0,0 +1,155 @@
+import { computed } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+import { Menu } from '@/components/Menu'
+import { TagsView } from '@/components/TagsView'
+import { Logo } from '@/components/Logo'
+import AppView from './AppView.vue'
+import ToolHeader from './ToolHeader.vue'
+import { ElScrollbar } from 'element-plus'
+
+const appStore = useAppStore()
+
+// 标签页
+const tagsView = computed(() => appStore.getTagsView)
+
+// 菜单折叠
+const collapse = computed(() => appStore.getCollapse)
+
+// logo
+const logo = computed(() => appStore.logo)
+
+// 固定头部
+const fixedHeader = computed(() => appStore.getFixedHeader)
+
+// 是否是移动端
+const mobile = computed(() => appStore.getMobile)
+
+export const useRenderLayout = () => {
+ const renderClassic = () => {
+ return (
+ <>
+
- Archer
+ Archer
+ {logo.value ? (
+
+
+
+
+
+
+ )
+ }
+
+ const renderTopLeft = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ return {
+ renderClassic,
+ renderTopLeft
+ }
+}
diff --git a/src/locales/en.ts b/src/locales/en.ts
index a785c0515..718e0c001 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -35,7 +35,9 @@ export default {
localeIcon: 'Locale icon',
tagsView: 'Tags view',
logo: 'Logo',
- greyMode: 'Grey mode'
+ greyMode: 'Grey mode',
+ fixedHeader: 'Fixed header',
+ headerTheme: 'Header theme'
},
size: {
default: 'Default',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index d7433cfa7..1f633c11a 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -35,7 +35,9 @@ export default {
localeIcon: '多语言图标',
tagsView: '标签页',
logo: '标志',
- greyMode: '灰色模式'
+ greyMode: '灰色模式',
+ fixedHeader: '固定头部',
+ headerTheme: '头部主题'
},
size: {
default: '默认',
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 066ec9e0c..14bcf472a 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -4,6 +4,7 @@ import { useCache } from '@/hooks/web/useCache'
import { appModules } from '@/config/app'
import type { AppState, LayoutType } from '@/config/app'
import { setCssVar, humpToUnderline } from '@/utils'
+import { ElMessage } from 'element-plus'
const { wsCache } = useCache()
@@ -38,6 +39,9 @@ export const useAppStore = defineStore({
getLogo(): boolean {
return this.logo
},
+ getFixedHeader(): boolean {
+ return this.fixedHeader
+ },
getGreyMode(): boolean {
return this.greyMode
},
@@ -98,12 +102,20 @@ export const useAppStore = defineStore({
setLogo(logo: boolean) {
this.logo = logo
},
+ setFixedHeader(fixedHeader: boolean) {
+ this.fixedHeader = fixedHeader
+ },
setGreyMode(greyMode: boolean) {
this.greyMode = greyMode
},
setLayout(layout: LayoutType) {
+ if (this.mobile && layout !== 'classic') {
+ ElMessage.warning('移动端模式下不支持切换其他布局')
+ return
+ }
this.layout = layout
+ wsCache.set('layout', this.layout)
},
setTitle(title: string) {
this.title = title
diff --git a/src/styles/common.less b/src/styles/common.less
new file mode 100644
index 000000000..4d112995c
--- /dev/null
+++ b/src/styles/common.less
@@ -0,0 +1,25 @@
+.hover-tigger {
+ @apply flex h-full pt-1px px-10px cursor-pointer items-center;
+ transition: background var(--transition-time-02);
+ &:hover {
+ background-color: var(--top-header-hover-color);
+ }
+}
+
+.border-bottom {
+ @apply relative;
+ &:after {
+ content: '';
+ border-top: 1px solid var(--top-tool-border-color);
+ @apply absolute bottom-0 left-0 w-full h-1px;
+ }
+}
+
+.border-top {
+ @apply relative;
+ &:before {
+ content: '';
+ border-top: 1px solid var(--top-tool-border-color);
+ @apply absolute top-0 left-0 w-full h-1px;
+ }
+}
diff --git a/src/styles/index.less b/src/styles/index.less
index 744250010..6cc113feb 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -1 +1,2 @@
@import './var.css';
+@import './common.less';
diff --git a/src/styles/var.css b/src/styles/var.css
index ddc392f24..fc00fd54e 100644
--- a/src/styles/var.css
+++ b/src/styles/var.css
@@ -30,13 +30,19 @@
/* logo end */
/* header start */
+ --top-header-bg-color: '#fff';
+
+ --top-header-text-color: 'inherit';
+
+ --top-header-hover-color: #f6f6f6;
+
--top-tool-height: var(--logo-height);
--top-tool-p-x: 0;
--top-tool-border-color: #eee;
- --tags-view-height: 40px;
+ --tags-view-height: 35px;
/* header start */
--app-content-padding: 20px;
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index c5c03d2ae..ea48347a4 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -132,7 +132,8 @@ const signIn = async () => {
addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
})
permissionStore.setIsAddRouters(true)
- push({ path: redirect.value || permissionStore.addRouters[0].path })
+ // push({ path: redirect.value || permissionStore.addRouters[0].path })
+ push({ path: permissionStore.addRouters[0].path })
}
}
}
diff --git a/vite.config.ts b/vite.config.ts
index badd545b3..22ec30fb3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -117,7 +117,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
},
hmr: {
overlay: false
- }
+ },
+ host: '0.0.0.0'
},
optimizeDeps: {
include: [
diff --git a/windi.config.ts b/windi.config.ts
index 56ccbf341..906ed8bbe 100644
--- a/windi.config.ts
+++ b/windi.config.ts
@@ -1,4 +1,5 @@
import { defineConfig } from 'windicss/helpers'
+// import plugin from 'windicss/plugin'
// function range(size, startAt = 1) {
// return Array.from(Array(size).keys()).map((i) => i + startAt)
@@ -34,16 +35,33 @@ export default defineConfig({
// // ...range(50).map((i) => `ml-${i}px`)
// }
}
- // Plugin: [
- // require('@windicss/plugin-animations')({
- // settings: {
- // animatedSpeed: 1000,
- // heartBeatSpeed: 1000,
- // hingeSpeed: 2000,
- // bounceInSpeed: 750,
- // bounceOutSpeed: 750,
- // animationDelaySpeed: 1000
- // }
+ // plugins: [
+ // plugin(({ addComponents }) => {
+ // addComponents({
+ // '.hover-tigger': {
+ // display: 'flex',
+ // height: '100%',
+ // padding: '1px 10px 0',
+ // cursor: 'pointer',
+ // alignItems: 'center',
+ // transition: 'background var(--transition-time-02)',
+ // '&:hover': {
+ // backgroundColor: '#f6f6f6'
+ // }
+ // },
+ // '.border-bottom': {
+ // position: 'relative',
+ // '&:after': {
+ // position: 'absolute',
+ // bottom: '0',
+ // left: '0',
+ // width: '100%',
+ // height: '1px',
+ // borderTop: '1px solid var(--top-tool-border-color)',
+ // content: ''
+ // }
+ // }
+ // })
// })
// ]
})
+
+ {tagsView.value ? (
+
+
+