style: 优化UI过渡效果与主题样式

biji-qianduan/src/App.vue

@@ -50,7 +50,7 @@ watchEffect(() => {
   cursor: pointer;
   font-size: 24px;
   user-select: none;
-  transition: all var(--transition-duration) ease;
+  transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
   z-index: 1000;
 }
 

biji-qianduan/src/components/LoginPage.vue

@@ -94,17 +94,15 @@ const goToHome = () => {
   max-width: 420px;
   padding: 2.5rem 2rem;
   border-radius: var(--border-radius);
-  background-color: rgba(255, 255, 255, 0.85);
+  background-color: #ffffff;
-  backdrop-filter: blur(10px);
+  border: 1px solid #e4e7ed;
-  box-shadow: var(--box-shadow-dark);
-  border: 1px solid rgba(255, 255, 255, 0.2);
   animation: fadeIn 0.5s ease-out;
   overflow: hidden;
 }
 
 .dark-theme .login-card {
-  background-color: rgba(23, 23, 39, 0.85);
+  background-color: #1e1e2f;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid #2c2c3d;
 }
 
 .card-header {
@@ -138,7 +136,7 @@ const goToHome = () => {
   border-radius: var(--border-radius);
   background-color: var(--bg-color-secondary);
   box-shadow: none;
-  transition: all var(--transition-duration) ease;
+  transition: border-color var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
   border: 1px solid var(--border-color);
 }
 
@@ -160,7 +158,7 @@ const goToHome = () => {
   font-size: 1rem;
   font-weight: 600;
   border: none;
-  transition: all var(--transition-duration) ease;
+  transition: background-color var(--transition-duration) ease, transform var(--transition-duration) ease;
 }
 
 .login-button {

biji-qianduan/src/components/RegisterPage.vue

@@ -127,17 +127,15 @@ const goToHome = () => {
   max-width: 420px;
   padding: 2.5rem 2rem;
   border-radius: var(--border-radius);
-  background-color: rgba(255, 255, 255, 0.85);
+  background-color: #ffffff;
-  backdrop-filter: blur(10px);
+  border: 1px solid #e4e7ed;
-  box-shadow: var(--box-shadow-dark);
-  border: 1px solid rgba(255, 255, 255, 0.2);
   animation: fadeIn 0.5s ease-out;
   overflow: hidden;
 }
 
 .dark-theme .register-card {
-  background-color: rgba(23, 23, 39, 0.85);
+  background-color: #1e1e2f;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid #2c2c3d;
 }
 
 .card-header {
@@ -171,7 +169,7 @@ const goToHome = () => {
   border-radius: var(--border-radius);
   background-color: var(--bg-color-secondary);
   box-shadow: none;
-  transition: all var(--transition-duration) ease;
+  transition: border-color var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
   border: 1px solid var(--border-color);
 }
 
@@ -193,7 +191,7 @@ const goToHome = () => {
   font-size: 1rem;
   font-weight: 600;
   border: none;
-  transition: all var(--transition-duration) ease;
+  transition: background-color var(--transition-duration) ease, transform var(--transition-duration) ease;
 }
 
 .register-button {

biji-qianduan/src/components/home/HomeHeader.vue

@@ -111,17 +111,17 @@ const handleUpload = (file) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
-  padding: 1rem;
+  padding: 0.75rem 1rem;
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: #ffffff;
-  backdrop-filter: blur(10px);
   border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow-light);
+  border: 1px solid #e4e7ed;
   gap: 1rem;
 }
 
 .dark-theme .header {
-  background-color: rgba(30, 30, 47, 0.8);
+  background-color: #1e1e2f;
+  border-color: #2c2c3d;
 }
 
 .actions {

biji-qianduan/src/components/home/NoteList.vue

@@ -48,12 +48,11 @@ defineEmits(['preview']);
 
 .file-item {
   cursor: pointer;
-  border-radius: 12px; /* Increased border radius */
+  border-radius: 12px;
   border: 1px solid var(--border-color);
-  transition: all var(--transition-duration) ease;
+  transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease, border-color var(--transition-duration) ease;
-  background-color: #ffffff; /* Explicitly set to white for light theme */
+  background-color: #ffffff;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  will-change: transform;
-  overflow: hidden; /* Ensure content respects border radius */
 }
 
 .dark-theme .file-item {

biji-qianduan/src/components/home/SidebarMenu.vue

@@ -162,24 +162,18 @@ const renderMenu = (item) => {
 
 <style scoped>
 .sidebar {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
+  background: #ffffff;
-  backdrop-filter: blur(24px);
+  border-right: 1px solid #e4e7ed;
-  border-right: 1px solid rgba(0, 0, 0, 0.06);
+  transition: width 0.25s ease;
-  transition: width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   display: flex;
   flex-direction: column;
-  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03);
   position: relative;
   z-index: 10;
 }
 
-.sidebar.is-collapsed {
-  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.04);
-}
-
 .dark-theme .sidebar {
-  background: linear-gradient(180deg, rgba(23, 23, 39, 0.98) 0%, rgba(18, 18, 32, 0.98) 100%);
+  background: #1e1e2f;
-  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  border-right: 1px solid #2c2c3d;
 }
 
 .sidebar-header {
@@ -188,9 +182,9 @@ const renderMenu = (item) => {
   justify-content: space-between;
   padding: 1rem;
   flex-shrink: 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+  border-bottom: 1px solid #e4e7ed;
   min-height: 64px;
-  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: padding 0.25s ease;
 }
 
 .sidebar.is-collapsed .sidebar-header {
@@ -236,7 +230,7 @@ const renderMenu = (item) => {
 }
 
 .action-btn {
-  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: transform 0.2s ease, color 0.2s ease;
 }
 
 .toggle-btn .el-icon {
@@ -248,7 +242,7 @@ const renderMenu = (item) => {
 }
 
 .fade-enter-active, .fade-leave-active {
-  transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: opacity 0.2s ease, transform 0.2s ease;
 }
 
 .fade-enter-from, .fade-leave-to {
@@ -270,7 +264,6 @@ const renderMenu = (item) => {
   overflow-y: auto;
   overflow-x: hidden;
   padding: 0.75rem 0.25rem;
-  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 .el-menu::-webkit-scrollbar {
@@ -299,7 +292,6 @@ const renderMenu = (item) => {
   letter-spacing: 1.2px;
   padding: 0.75rem 1rem 0.5rem;
   opacity: 0.6;
-  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 .sidebar.is-collapsed .section-title {
@@ -308,9 +300,8 @@ const renderMenu = (item) => {
 
 .menu-footer {
   margin-top: auto;
-  border-top: 1px solid rgba(0, 0, 0, 0.04);
+  border-top: 1px solid #e4e7ed;
   padding-top: 0.75rem;
-  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 .dark-theme .menu-footer {
@@ -323,7 +314,7 @@ const renderMenu = (item) => {
   border-radius: 12px;
   margin: 2px 0.5rem;
   color: var(--text-color-secondary);
-  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
   position: relative;
 }
 
@@ -389,13 +380,12 @@ const renderMenu = (item) => {
   align-items: center;
   gap: 4px;
   padding: 4px;
-  background: rgba(0, 0, 0, 0.04);
+  background: #f5f7fa;
   border-radius: 8px;
-  backdrop-filter: blur(8px);
 }
 
 .dark-theme .menu-item-actions {
-  background: rgba(255, 255, 255, 0.08);
+  background: #2c2c3d;
 }
 
 .el-menu:not(.el-menu--collapse) .el-menu-item:hover .menu-item-actions,
@@ -414,7 +404,7 @@ const renderMenu = (item) => {
   color: var(--text-color-secondary);
   padding: 6px;
   border-radius: 6px;
-  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
 }
 
 .edit-icon:hover {