diff --git a/mayfly_go_web/src/App.vue b/mayfly_go_web/src/App.vue index debf6a5c..6d2d411d 100644 --- a/mayfly_go_web/src/App.vue +++ b/mayfly_go_web/src/App.vue @@ -15,6 +15,7 @@ import LockScreen from '@/views/layout/lockScreen/index.vue'; import Setings from '@/views/layout/navBars/breadcrumb/setings.vue'; import Watermark from '@/common/utils/wartermark'; import mittBus from '@/common/utils/mitt'; +import { getThemeConfig } from './common/utils/storage'; const setingsRef = ref(); const route = useRoute(); @@ -42,10 +43,14 @@ onMounted(() => { mittBus.on('openSetingsDrawer', () => { openSetingsDrawer(); }); + // 获取缓存中的布局配置 - if (getLocal('themeConfig')) { - themeConfigStores.setThemeConfig({ themeConfig: getLocal('themeConfig') }); + const tc = getThemeConfig(); + if (tc) { + themeConfigStores.setThemeConfig({ themeConfig: tc }); document.documentElement.style.cssText = getLocal('themeConfigStyle'); + + themeConfigStores.switchDark(tc.isDark); } }); }); diff --git a/mayfly_go_web/src/assets/image/bg-login.png b/mayfly_go_web/src/assets/image/bg-login.png deleted file mode 100644 index c7f85bef..00000000 Binary files a/mayfly_go_web/src/assets/image/bg-login.png and /dev/null differ diff --git a/mayfly_go_web/src/assets/image/login-bg-main.svg b/mayfly_go_web/src/assets/image/login-bg-main.svg new file mode 100644 index 00000000..0499f300 --- /dev/null +++ b/mayfly_go_web/src/assets/image/login-bg-main.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/mayfly_go_web/src/assets/image/login-bg-split.svg b/mayfly_go_web/src/assets/image/login-bg-split.svg new file mode 100644 index 00000000..a345a548 --- /dev/null +++ b/mayfly_go_web/src/assets/image/login-bg-split.svg @@ -0,0 +1,19 @@ + + + Layer 1 + + + + + + Layer 1 + + + + + + + + \ No newline at end of file diff --git a/mayfly_go_web/src/common/utils/loading.ts b/mayfly_go_web/src/common/utils/loading.ts index e29a2d30..8df43eaf 100644 --- a/mayfly_go_web/src/common/utils/loading.ts +++ b/mayfly_go_web/src/common/utils/loading.ts @@ -1,46 +1,42 @@ import { nextTick } from 'vue'; -import loadingCss from '@/theme/loading.scss?inline'; +import '@/theme/loading.scss'; -// 定义方法 +/** + * 页面全局 Loading + * @method start 创建 loading + * @method done 移除 loading + */ export const NextLoading = { - // 载入 css - setCss: () => { - let link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = loadingCss; - link.crossOrigin = 'anonymous'; - document.getElementsByTagName('head')[0].appendChild(link); - }, // 创建 loading start: () => { - const bodys: any = document.body; - const div = document.createElement('div'); + const bodys: Element = document.body; + const div = document.createElement('div'); div.setAttribute('class', 'loading-next'); const htmls = `
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
`; div.innerHTML = htmls; bodys.insertBefore(div, bodys.childNodes[0]); }, // 移除 loading - done: () => { + done: (time: number = 1000) => { nextTick(() => { setTimeout(() => { - const el = document.querySelector('.loading-next'); - el && el.parentNode?.removeChild(el); - }, 1000); + const el = document.querySelector('.loading-next'); + el?.parentNode?.removeChild(el); + }, time); }); }, }; diff --git a/mayfly_go_web/src/common/utils/storage.ts b/mayfly_go_web/src/common/utils/storage.ts index 021a6f7b..2f4e8cce 100644 --- a/mayfly_go_web/src/common/utils/storage.ts +++ b/mayfly_go_web/src/common/utils/storage.ts @@ -21,6 +21,14 @@ export function saveUser(userinfo: any) { setLocal(UserKey, userinfo); } +export function saveThemeConfig(themeConfig: any) { + setLocal('themeConfig', themeConfig); +} + +export function getThemeConfig() { + return getLocal('themeConfig'); +} + // 获取是否开启水印 export function getUseWatermark() { return getLocal('useWatermark'); diff --git a/mayfly_go_web/src/common/utils/wartermark.ts b/mayfly_go_web/src/common/utils/wartermark.ts index 05db3b09..c5ef43fb 100644 --- a/mayfly_go_web/src/common/utils/wartermark.ts +++ b/mayfly_go_web/src/common/utils/wartermark.ts @@ -43,9 +43,12 @@ function del() { const watermark = { use: () => { + const userinfo = getUser(); + if (!userinfo) { + del(); + } setTimeout(() => { - const userinfo = getUser(); - if (userinfo && getUseWatermark()) { + if (getUseWatermark()) { set(`${userinfo.username} ${dateFormat2('yyyy-MM-dd HH:mm:ss', new Date())}`); } else { del(); diff --git a/mayfly_go_web/src/router/index.ts b/mayfly_go_web/src/router/index.ts index dc3a04d8..d9857168 100644 --- a/mayfly_go_web/src/router/index.ts +++ b/mayfly_go_web/src/router/index.ts @@ -29,7 +29,6 @@ const router = createRouter({ // 前端控制路由：初始化方法，防止刷新时丢失 export function initAllFun() { - NextLoading.start(); // 界面 loading 动画开始执行 const token = getToken(); // 获取浏览器缓存 token 值 if (!token) { // 无 token 停止执行下一步 @@ -48,7 +47,6 @@ export function initAllFun() { // 后端控制路由：执行路由数据初始化 export async function initBackEndControlRoutesFun() { - NextLoading.start(); // 界面 loading 动画开始执行 const token = getToken(); // 获取浏览器缓存 token 值 if (!token) { // 无 token 停止执行下一步 @@ -232,14 +230,19 @@ export function resetRoute() { } export async function initRouter() { - // 初始化方法执行 - const { isRequestRoutes } = useThemeConfig(pinia).themeConfig; - if (!isRequestRoutes) { - // 未开启后端控制路由 - initAllFun(); - } else if (isRequestRoutes) { - // 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由 - await initBackEndControlRoutesFun(); + NextLoading.start(); // 界面 loading 动画开始执行 + try { + // 初始化方法执行 + const { isRequestRoutes } = useThemeConfig(pinia).themeConfig; + if (!isRequestRoutes) { + // 未开启后端控制路由 + initAllFun(); + } else if (isRequestRoutes) { + // 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由 + await initBackEndControlRoutesFun(); + } + } finally { + NextLoading.done(); } } @@ -297,7 +300,6 @@ router.beforeEach(async (to, from, next) => { // 路由加载后 router.afterEach(() => { NProgress.done(); - NextLoading.done(); }); // 导出路由 diff --git a/mayfly_go_web/src/store/themeConfig.ts b/mayfly_go_web/src/store/themeConfig.ts index 997e0db3..85825635 100644 --- a/mayfly_go_web/src/store/themeConfig.ts +++ b/mayfly_go_web/src/store/themeConfig.ts @@ -140,5 +140,17 @@ export const useThemeConfig = defineStore('themeConfig', { setThemeConfig(data: ThemeConfigState) { this.themeConfig = data.themeConfig; }, + // 切换暗模式 + switchDark(isDark: boolean) { + this.themeConfig.isDark = isDark; + const body = document.documentElement as HTMLElement; + if (isDark) { + body.setAttribute('class', 'dark'); + this.themeConfig.editorTheme = 'vs-dark'; + } else { + body.setAttribute('class', ''); + this.themeConfig.editorTheme = 'SolarizedLight'; + } + }, }, }); diff --git a/mayfly_go_web/src/theme/common/transition.scss b/mayfly_go_web/src/theme/common/transition.scss index 8d498e3b..ebc19d11 100644 --- a/mayfly_go_web/src/theme/common/transition.scss +++ b/mayfly_go_web/src/theme/common/transition.scss @@ -83,3 +83,42 @@ opacity: 1; } } + +/* 登录页动画 +------------------------------- */ +@keyframes loginLeft { + 0% { + left: -100%; + } + 50%, + 100% { + left: 100%; + } +} +@keyframes loginTop { + 0% { + top: -100%; + } + 50%, + 100% { + top: 100%; + } +} +@keyframes loginRight { + 0% { + right: -100%; + } + 50%, + 100% { + right: 100%; + } +} +@keyframes loginBottom { + 0% { + bottom: -100%; + } + 50%, + 100% { + bottom: 100%; + } +} \ No newline at end of file diff --git a/mayfly_go_web/src/theme/element.scss b/mayfly_go_web/src/theme/element.scss index 165df3f2..82f65ea8 100644 --- a/mayfly_go_web/src/theme/element.scss +++ b/mayfly_go_web/src/theme/element.scss @@ -335,8 +335,14 @@ /* Set padding to ensure the height is 32px */ // padding: 6px 12px; background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129)); - } - .el-popper.is-customized .el-popper__arrow::before { +} +.el-popper.is-customized .el-popper__arrow::before { background: linear-gradient(45deg, #b2e68d, #bce689); right: 0; - } \ No newline at end of file +} + + +.el-dialog { + border-radius: 6px; /* 设置圆角 */ + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加轻微阴影效果 */ +} \ No newline at end of file diff --git a/mayfly_go_web/src/theme/loading.scss b/mayfly_go_web/src/theme/loading.scss index c28c7b9d..3067324f 100644 --- a/mayfly_go_web/src/theme/loading.scss +++ b/mayfly_go_web/src/theme/loading.scss @@ -48,4 +48,4 @@ 35% { transform: scale3D(0, 0, 1); } -} +} \ No newline at end of file diff --git a/mayfly_go_web/src/views/layout/lockScreen/index.vue b/mayfly_go_web/src/views/layout/lockScreen/index.vue index 02d435ca..d6321710 100644 --- a/mayfly_go_web/src/views/layout/lockScreen/index.vue +++ b/mayfly_go_web/src/views/layout/lockScreen/index.vue @@ -213,7 +213,7 @@ onUnmounted(() => { } .layout-lock-screen-img { @extend .layout-lock-screen-fixed; - background: url('@/assets/image/bg-login.png') no-repeat; + background: url('@/assets/image/login-bg-main.svg') no-repeat; background-size: 100% 100%; z-index: 9999991; } diff --git a/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue b/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue index 2c35d83f..82c7712b 100644 --- a/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue +++ b/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue @@ -374,7 +374,7 @@ -
+
diff --git a/mayfly_go_web/src/views/layout/navBars/breadcrumb/user.vue b/mayfly_go_web/src/views/layout/navBars/breadcrumb/user.vue index 47342c18..61a5e063 100644 --- a/mayfly_go_web/src/views/layout/navBars/breadcrumb/user.vue +++ b/mayfly_go_web/src/views/layout/navBars/breadcrumb/user.vue @@ -56,7 +56,7 @@ - + {{ userInfo.name || userInfo.username }} @@ -75,7 +75,7 @@ diff --git a/mayfly_go_web/src/views/login/index.vue b/mayfly_go_web/src/views/login/index.vue index ccb077be..0bbf9528 100644 --- a/mayfly_go_web/src/views/login/index.vue +++ b/mayfly_go_web/src/views/login/index.vue @@ -1,68 +1,81 @@ -