ikmkj/biji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ikmkj
2026-03-03 17:04:21 +08:00
parent eb92340786
commit a805ff905e
6 changed files with 37 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
biji-qianduan/src/App.vue
View File

@@ -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;
}

14
biji-qianduan/src/components/LoginPage.vue
View File

@@ -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);
backdrop-filter: blur(10px);
box-shadow: var(--box-shadow-dark);
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: #ffffff;
border: 1px solid #e4e7ed;
animation: fadeIn 0.5s ease-out;
overflow: hidden;
}
.dark-theme .login-card {
background-color: rgba(23, 23, 39, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: #1e1e2f;
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 {

14
biji-qianduan/src/components/RegisterPage.vue
View File

@@ -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);
backdrop-filter: blur(10px);
box-shadow: var(--box-shadow-dark);
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: #ffffff;
border: 1px solid #e4e7ed;
animation: fadeIn 0.5s ease-out;
overflow: hidden;
}
.dark-theme .register-card {
background-color: rgba(23, 23, 39, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: #1e1e2f;
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 {

12
biji-qianduan/src/components/home/HomeHeader.vue
View File

@@ -111,17 +111,17 @@ const handleUpload = (file) => {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding: 1rem;
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
margin-bottom: 1rem;
padding: 0.75rem 1rem;
background-color: #ffffff;
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 {

9
biji-qianduan/src/components/home/NoteList.vue
View File

@@ -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;
background-color: #ffffff; /* Explicitly set to white for light theme */
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
overflow: hidden; /* Ensure content respects border radius */
transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease, border-color var(--transition-duration) ease;
background-color: #ffffff;
will-change: transform;
}
.dark-theme .file-item {

38
biji-qianduan/src/components/home/SidebarMenu.vue
View File

@@ -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%);
backdrop-filter: blur(24px);
border-right: 1px solid rgba(0, 0, 0, 0.06);
transition: width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
background: #ffffff;
border-right: 1px solid #e4e7ed;
transition: width 0.25s ease;
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%);
border-right: 1px solid rgba(255, 255, 255, 0.08);
background: #1e1e2f;
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 {