Jelajahi Sumber

修复卡片折叠过渡特效和一些登录相关的bug

Linhanmic 1 bulan lalu
induk
melakukan
bb941244aa

+ 1 - 2
package-lock.json

@@ -3750,10 +3750,9 @@
     },
     "node_modules/unplugin-auto-import": {
       "version": "0.18.3",
-      "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-0.18.3.tgz",
+      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.18.3.tgz",
       "integrity": "sha512-q3FUtGQjYA2e+kb1WumyiQMjHM27MrTQ05QfVwtLRVhyYe+KF6TblBYaEX9L6Z0EibsqaXAiW+RFfkcQpfaXzg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@antfu/utils": "^0.7.10",
         "@rollup/pluginutils": "^5.1.0",

+ 2 - 2
src/components/CollapsibleSection.vue

@@ -70,12 +70,12 @@
   <style scoped>
   .collapse-enter-active,
   .collapse-leave-active {
-    transition: height 0.3s ease-out;
+    /* transition: height 0.3s ease-out; */
     overflow: hidden;
   }
   
   .collapse-enter-from,
   .collapse-leave-to {
-    height: 0;
+    /* height: 0; */
   }
   </style>

+ 12 - 12
src/components/Header.vue

@@ -43,20 +43,9 @@ const isAdmin = computed(() => store.isAdmin);
   box-shadow: var(--shadow-md);
   padding: 1rem 0;
   position: relative;
-  overflow: hidden;
+  overflow: visible;
 }
 
-.header::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
-  animation: shimmer 15s infinite linear;
-  pointer-events: none;
-}
 
 @keyframes shimmer {
   0% { transform: rotate(0deg); }
@@ -122,6 +111,17 @@ const isAdmin = computed(() => store.isAdmin);
   gap: 1rem;
 }
 
+.relative {
+  position: relative; /* 确保父元素是相对定位 */
+}
+
+.absolute {
+  position: absolute; /* 下拉菜单绝对定位 */
+  top: 100%; /* 确保下拉菜单在 header 下面 */
+  right: 0; /* 右对齐 */
+  z-index: 10; /* 确保下拉菜单在其他元素之上 */
+}
+
 @media (max-width: 768px) {
   .header-nav {
     flex-direction: column;

+ 14 - 1
src/components/UserMenu.vue

@@ -27,4 +27,17 @@
     store.dispatch('auth/logout');
     router.push('/');
   };
-  </script>
+  </script>
+
+  <style scoped>
+  .relative {
+    position: relative;
+  }
+  .absolute {
+    position: absolute; /* 下拉菜单绝对定位 */
+    top: 100%; /* 确保下拉菜单在 header 下面 */
+    right: 0; /* 右对齐 */
+    z-index: 10; /* 确保下拉菜单在其他元素之上 */
+  }
+  
+  </style>

+ 2 - 2
src/router/index.js

@@ -96,8 +96,8 @@ const router = createRouter({
 
 // Navigation guard
 router.beforeEach((to, from, next) => {
-  const isAuthenticated = false // This should be replaced with actual auth check
-  const isAdmin = false // This should be replaced with actual admin check
+  const isAuthenticated = false;//authStore.isAuthenticated; // This should be replaced with actual auth check
+  const isAdmin = false;//authStore.isAdmin; // This should be replaced with actual admin check
 
   if (to.matched.some(record => record.meta.requiresAuth)) {
     if (!isAuthenticated) {

+ 6 - 0
src/store/modules/auth.js

@@ -64,5 +64,11 @@ export const useAuthStore = defineStore('auth', {
     handleError(message, error) {
       console.error(message, error);
     },
+
+    setUser(user) {
+      this.user = user;
+      this.isAuthenticated = true;
+      this.isAdmin = user.role === 'admin';
+    },
   },
 });

+ 2 - 4
src/views/Login.vue

@@ -51,10 +51,8 @@ export default {
       try {
         const response = await userLoginPost({ username: username.value, password: password.value });
         localStorage.setItem('token', response.token);
-        authStore.setUser(response.user);
-        authStore.login();
-        
-        if (response.user.role === 'admin') {
+        authStore.setUser(response.data);
+        if (authStore.role === 'admin') {
           router.push('/admin');
         } else {
           router.push('/');