+
-
-
-
-
-
@@ -33,26 +21,27 @@
-
-
-
-
- 个人中心
-
-
+
@@ -61,14 +50,10 @@
import { ElMessageBox } from 'element-plus'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
-import TopBar from './TopBar'
-import Logo from './Sidebar/Logo'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import HeaderSearch from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
@@ -84,13 +69,13 @@ function toggleSideBar() {
function handleCommand(command) {
switch (command) {
case "setLayout":
- setLayout()
- break
+ setLayout();
+ break;
case "logout":
- logout()
- break
+ logout();
+ break;
default:
- break
+ break;
}
}
@@ -101,85 +86,36 @@ function logout() {
type: 'warning'
}).then(() => {
userStore.logOut().then(() => {
- location.href = '/index'
+ location.href = '/index';
})
- }).catch(() => { })
+ }).catch(() => { });
}
const emits = defineEmits(['setLayout'])
function setLayout() {
- emits('setLayout')
+ emits('setLayout');
}
-async function toggleTheme(event) {
- const x = event?.clientX || window.innerWidth / 2
- const y = event?.clientY || window.innerHeight / 2
- const wasDark = settingsStore.isDark
-
- const isReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches
- const isSupported = document.startViewTransition && !isReducedMotion
-
- if (!isSupported) {
- settingsStore.toggleTheme()
- return
- }
-
- try {
- const transition = document.startViewTransition(async () => {
- await new Promise((resolve) => setTimeout(resolve, 10))
- settingsStore.toggleTheme()
- await nextTick()
- })
- await transition.ready
-
- const endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y))
- const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
- document.documentElement.animate(
- {
- clipPath: !wasDark ? [...clipPath].reverse() : clipPath
- }, {
- duration: 650,
- easing: "cubic-bezier(0.4, 0, 0.2, 1)",
- fill: "forwards",
- pseudoElement: !wasDark ? "::view-transition-old(root)" : "::view-transition-new(root)"
- }
- )
- await transition.finished
- } catch (error) {
- console.warn("View transition failed, falling back to immediate toggle:", error)
- settingsStore.toggleTheme()
- }
+function toggleTheme() {
+ settingsStore.toggleTheme()
}
\ No newline at end of file
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 680c30a..05387bc 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -25,34 +25,30 @@ defineProps({
}
})
-const title = import.meta.env.VITE_APP_TITLE
-const settingsStore = useSettingsStore()
-const sideTheme = computed(() => settingsStore.sideTheme)
+const title = import.meta.env.VITE_APP_TITLE;
+const settingsStore = useSettingsStore();
+const sideTheme = computed(() => settingsStore.sideTheme);
// 获取Logo背景色
const getLogoBackground = computed(() => {
if (settingsStore.isDark) {
- return 'var(--sidebar-bg)'
+ return 'var(--sidebar-bg)';
}
- if (settingsStore.navType == 3) {
- return variables.menuLightBg
- }
- return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
-})
+ return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg;
+});
// 获取Logo文字颜色
const getLogoTextColor = computed(() => {
if (settingsStore.isDark) {
- return 'var(--sidebar-text)'
+ return 'var(--sidebar-text)';
}
- if (settingsStore.navType == 3) {
- return variables.menuLightText
- }
- return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText
-})
+ return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText;
+});
diff --git a/src/layout/index.vue b/src/layout/index.vue
index a78d23f..bad8dae 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -17,16 +17,18 @@
import { useWindowSize } from '@vueuse/core'
import Sidebar from './components/Sidebar/index.vue'
import { AppMain, Navbar, Settings, TagsView } from './components'
+import defaultSettings from '@/settings'
+
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
-const theme = computed(() => settingsStore.theme)
-const sideTheme = computed(() => settingsStore.sideTheme)
-const sidebar = computed(() => useAppStore().sidebar)
-const device = computed(() => useAppStore().device)
-const needTagsView = computed(() => settingsStore.tagsView)
-const fixedHeader = computed(() => settingsStore.fixedHeader)
+const theme = computed(() => settingsStore.theme);
+const sideTheme = computed(() => settingsStore.sideTheme);
+const sidebar = computed(() => useAppStore().sidebar);
+const device = computed(() => useAppStore().device);
+const needTagsView = computed(() => settingsStore.tagsView);
+const fixedHeader = computed(() => settingsStore.fixedHeader);
const classObj = computed(() => ({
hideSidebar: !sidebar.value.opened,
@@ -35,8 +37,8 @@ const classObj = computed(() => ({
mobile: device.value === 'mobile'
}))
-const { width, height } = useWindowSize()
-const WIDTH = 992 // refer to Bootstrap's responsive design
+const { width, height } = useWindowSize();
+const WIDTH = 992; // refer to Bootstrap's responsive design
watch(() => device.value, () => {
if (device.value === 'mobile' && sidebar.value.opened) {
@@ -57,18 +59,18 @@ function handleClickOutside() {
useAppStore().closeSideBar({ withoutAnimation: false })
}
-const settingRef = ref(null)
+const settingRef = ref(null);
function setLayout() {
- settingRef.value.openSetting()
+ settingRef.value.openSetting();
}
- ![]()
- {{ userStore.nickName }}
-
-
-
+
+
+
+ 个人中心
+
+
布局设置
-
- 退出登录
-
-
-
-
+
+ 退出登录
+
+
+
+
+
+ ![]()
+
+
+