From 2a9112650755dc3c98e6806f8eec48bce7741c20 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 06 六月 2025 17:28:10 +0800
Subject: [PATCH] 1.样式根据页面宽度修改 2.系统标题修改
---
.env.staging | 4 +-
.env.development | 4 +-
index.html | 2
src/layout/components/Navbar.vue | 47 ++++++++++++++++++++++-
package.json | 2
.env.production | 4 +-
src/components/TopNav/index.vue | 19 +++++----
src/store/modules/app.js | 1
8 files changed, 63 insertions(+), 20 deletions(-)
diff --git a/.env.development b/.env.development
index af9ba00..394972a 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
# 椤甸潰鏍囬
-VITE_APP_TITLE = 鑻ヤ緷绠＄悊绯荤粺
+VITE_APP_TITLE = 闄曡タ鏄痉鐜繚鍨嬬叅鏈夐檺鍏徃
# 寮�鍙戠幆澧冮厤缃�
VITE_APP_ENV = 'development'
-# 鑻ヤ緷绠＄悊绯荤粺/寮�鍙戠幆澧�
+# 闄曡タ鏄痉鐜繚鍨嬬叅鏈夐檺鍏徃/寮�鍙戠幆澧�
VITE_APP_BASE_API = '/dev-api'
diff --git a/.env.production b/.env.production
index cbabf89..52cbc80 100644
--- a/.env.production
+++ b/.env.production
@@ -1,10 +1,10 @@
# 椤甸潰鏍囬
-VITE_APP_TITLE = 鑻ヤ緷绠＄悊绯荤粺
+VITE_APP_TITLE = 闄曡タ鏄痉鐜繚鍨嬬叅鏈夐檺鍏徃
# 鐢熶骇鐜閰嶇疆
VITE_APP_ENV = 'production'
-# 鑻ヤ緷绠＄悊绯荤粺/鐢熶骇鐜
+# 闄曡タ鏄痉鐜繚鍨嬬叅鏈夐檺鍏徃/鐢熶骇鐜
VITE_APP_BASE_API = '/prod-api'
# 鏄惁鍦ㄦ墦鍖呮椂寮�鍚帇缂╋紝鏀寔 gzip 鍜� brotli
diff --git a/.env.staging b/.env.staging
index b11336d..4e25589 100644
--- a/.env.staging
+++ b/.env.staging
@@ -1,10 +1,10 @@
# 椤甸潰鏍囬
-VITE_APP_TITLE = 鑻ヤ緷绠＄悊绯荤粺
+VITE_APP_TITLE = 闄曡タ鏄痉鐜繚鍨嬬叅鏈夐檺鍏徃
# 鐢熶骇鐜閰嶇疆
VITE_APP_ENV = 'staging'
-# 鑻ヤ緷绠＄悊绯荤粺/鐢熶骇鐜
+# 闄曡タ鏄痉鐜繚鍨嬬叅鏈夐檺鍏徃/鐢熶骇鐜
VITE_APP_BASE_API = '/stage-api'
# 鏄惁鍦ㄦ墦鍖呮椂寮�鍚帇缂╋紝鏀寔 gzip 鍜� brotli
diff --git a/index.html b/index.html
index b9105d6..5fada08 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="/favicon.ico">
- <title>鑻ヤ緷绠＄悊绯荤粺</title>
+ <title>闄曡タ鏄痉鐜繚鍨嬬叅鏈夐檺鍏徃</title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style>
html,
diff --git a/package.json b/package.json
index 93e1650..9655913 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "ruoyi",
"version": "3.8.9",
- "description": "鑻ヤ緷绠＄悊绯荤粺",
+ "description": "闄曡タ鏄痉鐜繚鍨嬬叅鏈夐檺鍏徃",
"author": "鑻ヤ緷",
"license": "MIT",
"type": "module",
diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index 62028af..cbd8d13 100644
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@@ -66,7 +66,10 @@
if (menu.path === '/' && menu.children) {
topMenus.push(menu.children[0])
} else {
- topMenus.push(menu)
+ menu.children.forEach(item => {
+ topMenus.push(item)
+
+ })
}
}
})
@@ -102,13 +105,13 @@
const tmpPath = path.substring(1, path.length)
if (!route.meta.link) {
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"))
- appStore.toggleSideBarHide(false)
+ // appStore.toggleSideBarHide(false)
}
} else if(!route.children) {
activePath = path
- appStore.toggleSideBarHide(true)
+ // appStore.toggleSideBarHide(true)
}
- activeRoutes(activePath)
+ // activeRoutes(activePath)
return activePath
})
@@ -132,11 +135,11 @@
} else {
router.push({ path: key })
}
- appStore.toggleSideBarHide(true)
+ // appStore.toggleSideBarHide(true)
} else {
// 鏄剧ず宸︿晶鑱斿姩鑿滃崟
- activeRoutes(key)
- appStore.toggleSideBarHide(false)
+ // activeRoutes(key)
+ // appStore.toggleSideBarHide(false)
}
}
@@ -152,7 +155,7 @@
if(routes.length > 0) {
permissionStore.setSidebarRouters(routes)
} else {
- appStore.toggleSideBarHide(true)
+ // appStore.toggleSideBarHide(true)
}
return routes
}
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 42f14c1..b6312ca 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -2,8 +2,10 @@
<div class="navbar">
<!-- <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->
<!-- <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />-->
-<!-- <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />-->
- <div class="logo">
+ <div v-if="sidebar.hide">
+ <top-nav id="topmenu-container" class="topmenu-container" />
+ </div>
+ <div class="logo" v-if="!sidebar.hide">
<img src="@/assets/logo/logo.png" alt=""/>
</div>
<div class="right-menu">
@@ -21,6 +23,9 @@
<router-link to="/user/profile">
<el-dropdown-item>涓汉涓績</el-dropdown-item>
</router-link>
+<!-- <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">-->
+<!-- <span>甯冨眬璁剧疆</span>-->
+<!-- </el-dropdown-item>-->
<el-dropdown-item divided command="logout">
<span>閫�鍑虹櫥褰�</span>
</el-dropdown-item>
@@ -35,6 +40,7 @@
</template>
<script setup>
+import {useWindowSize} from '@vueuse/core'
import { ElMessageBox } from 'element-plus'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
@@ -47,11 +53,47 @@
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
+const sidebar = computed(() => useAppStore().sidebar)
+const device = computed(() => useAppStore().device)
+import Sidebar from "@/layout/components/Sidebar/index.vue";
const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
+const isShowTop = ref(false)
+const { width, height } = useWindowSize()
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+watch(() => device.value, () => {
+ if (device.value === 'mobile' && sidebar.value.opened) {
+ useAppStore().closeSideBar({ withoutAnimation: false })
+ }
+})
+
+watchEffect(() => {
+ if (width.value - 1 < WIDTH) {
+ useAppStore().toggleDevice('mobile')
+ appStore.toggleSideBarHide(true)
+ useAppStore().closeSideBar({ withoutAnimation: true })
+ } else {
+ useAppStore().toggleDevice('desktop')
+ appStore.toggleSideBarHide(false)
+ }
+})
+// 鏍规嵁绐楀彛瀹藉害璁剧疆 isShowTop
+// const handleResize = () => {
+// settingsStore.topNav = !(window.innerWidth < 992)
+// }
+//
+// onMounted(() => {
+// handleResize() // 鍒濆鍒ゆ柇涓�娆�
+// window.addEventListener('resize', handleResize)
+// })
+//
+// onUnmounted(() => {
+// window.removeEventListener('resize', handleResize)
+// })
function toggleSideBar() {
appStore.toggleSideBar()
}
@@ -122,7 +164,6 @@
.topmenu-container {
position: absolute;
- left: 50px;
}
.errLog-container {
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index e5bbcb0..cd4824b 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -14,7 +14,6 @@
}),
actions: {
toggleSideBar(withoutAnimation) {
- console.log('toggleSideBar', withoutAnimation)
if (this.sidebar.hide) {
return false
}
--
Gitblit v1.9.3