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

feat: 实现笔记编辑器的自动保存功能与UI优化

Browse Source 
refactor: 重构用户登录注册逻辑与数据验证

fix: 修复图片上传安全漏洞与路径处理问题

perf: 优化笔记列表分页加载与滚动性能

style: 改进侧边栏菜单的视觉设计与交互体验

chore: 更新环境变量与数据库连接配置

docs: 添加用户信息视图对象的Swagger文档

test: 增加用户注册登录的输入验证测试

ci: 配置JWT密钥环境变量与安全设置

build: 调整前端构建配置与模块加载方式
This commit is contained in:
ikmkj
2026-03-02 02:01:01 +08:00
parent c9c21df0f0
commit 392cc52fd2
23 changed files with 811 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,74 +1,75 @@
<template>
<el-aside class="sidebar" :width="isCollapsed ? (isMobile ? '0' : '64px') : '250px'">
<el-aside class="sidebar" :class="{ 'is-collapsed': isCollapsed }" :width="isCollapsed ? (isMobile ? '0' : '72px') : '260px'">
<div class="sidebar-header">
<span v-if="!isCollapsed" style="margin-right: 15px; font-weight: bold;">笔记分类</span>
<el-button v-if="!isCollapsed" type="primary" size="small" @click="$emit('show-create-group')" circle>
<el-icon><Plus /></el-icon>
</el-button>
<el-button @click="$emit('toggle-collapse')" type="primary" size="small" circle v-if="!isMobile">
<el-icon>
<Fold v-if="!isCollapsed" />
<Expand v-else />
</el-icon>
</el-button>
<div class="header-left">
<transition name="fade">
<span v-if="!isCollapsed" class="sidebar-title">笔记分类</span>
</transition>
</div>
<div class="header-actions">
<el-tooltip content="新建分类" placement="top" :disabled="isCollapsed && !isMobile">
<el-button v-if="!isCollapsed || isMobile" type="primary" size="small" @click="$emit('show-create-group')" circle class="action-btn">
<el-icon><Plus /></el-icon>
</el-button>
</el-tooltip>
<el-tooltip :content="isCollapsed ? '展开' : '收起'" placement="top" v-if="!isMobile">
<el-button @click="$emit('toggle-collapse')" type="primary" size="small" circle class="action-btn toggle-btn">
<el-icon :class="{ 'rotate-180': isCollapsed }">
<Fold />
</el-icon>
</el-button>
</el-tooltip>
</div>
</div>
<!-- Desktop Menu -->
<el-menu
v-if="!isMobile"
:default-active="activeMenu"
class="el-menu-vertical-demo"
:collapse="isCollapsed"
popper-effect="light"
:collapse-transition="false"
>
<template v-for="menu in categoryTree" :key="menu.id">
<component :is="renderMenu(menu)" />
</template>
<ElMenuItem index="trash" @click="goToTrash">
<ElIcon><Delete /></ElIcon>
<template #title>回收站</template>
</ElMenuItem>
</el-menu>
<!-- Mobile Menu -->
<el-menu
v-if="isMobile"
:default-active="activeMenu"
class="el-menu-vertical-demo"
:collapse="isCollapsed"
:collapse-transition="false"
>
<div class="mobile-menu-header">
<div v-if="userStore.isLoggedIn" class="user-info">
<span class="username">欢迎, {{ userStore.userInfo?.username }}</span>
<div class="sidebar-content">
<el-menu
:default-active="activeMenu"
class="el-menu-vertical-demo"
:collapse="isCollapsed && !isMobile"
popper-effect="light"
:collapse-transition="true"
>
<div class="menu-section" v-if="isMobile">
<div v-if="userStore.isLoggedIn" class="user-info">
<el-avatar :size="40" class="user-avatar">{{ userStore.userInfo?.username?.charAt(0)?.toUpperCase() }}</el-avatar>
<span class="username">{{ userStore.userInfo?.username }}</span>
</div>
<div v-else class="guest-info">
<el-button type="primary" @click="goToLogin">登录</el-button>
<el-button @click="goToRegister">注册</el-button>
</div>
</div>
<div v-else class="guest-info">
<el-button type="primary" @click="goToLogin">登录</el-button>
<el-button @click="goToRegister">注册</el-button>
</div>
</div>
<template v-for="menu in categoryTree" :key="menu.id">
<component :is="renderMenu(menu)" />
</template>
<ElMenuItem index="trash" @click="goToTrash">
<ElIcon><Delete /></ElIcon>
<template #title>回收站</template>
</ElMenuItem>
<ElMenuItem v-if="userStore.isLoggedIn" index="system-settings" @click="$emit('show-system-settings')">
<ElIcon><setting /></ElIcon>
<template #title>系统管理</template>
</ElMenuItem>
<ElMenuItem v-if="userStore.isLoggedIn" index="update-password" @click="$emit('show-update-password')">
<ElIcon><lock /></ElIcon>
<template #title>修改密码</template>
</ElMenuItem>
<ElMenuItem v-if="userStore.isLoggedIn" index="logout" @click="$emit('logout')">
<ElIcon><SwitchButton /></ElIcon>
<template #title>退出登录</template>
</ElMenuItem>
</el-menu>
<div class="menu-section">
<div class="section-title" v-if="!isCollapsed">分类列表</div>
<template v-for="menu in categoryTree" :key="menu.id">
<component :is="renderMenu(menu)" />
</template>
</div>
<div class="menu-section menu-footer">
<ElMenuItem index="trash" @click="goToTrash" class="menu-item-trash">
<ElIcon><Delete /></ElIcon>
<template #title>回收站</template>
</ElMenuItem>
<template v-if="isMobile && userStore.isLoggedIn">
<ElMenuItem index="system-settings" @click="$emit('show-system-settings')">
<ElIcon><Setting /></ElIcon>
<template #title>系统管理</template>
</ElMenuItem>
<ElMenuItem index="update-password" @click="$emit('show-update-password')">
<ElIcon><Lock /></ElIcon>
<template #title>修改密码</template>
</ElMenuItem>
<ElMenuItem index="logout" @click="$emit('logout')" class="menu-item-logout">
<ElIcon><SwitchButton /></ElIcon>
<template #title>退出登录</template>
</ElMenuItem>
</template>
</div>
</el-menu>
</div>
</el-aside>
</template>
@@ -161,17 +162,24 @@ const renderMenu = (item) => {
<style scoped>
.sidebar {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-right: 1px solid rgba(0, 0, 0, 0.05);
transition: width 0.3s ease; /* Apply transition to width */
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);
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-color: rgba(23, 23, 39, 0.8);
border-right: 1px solid rgba(255, 255, 255, 0.1);
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);
}
.sidebar-header {
@@ -180,34 +188,183 @@ const renderMenu = (item) => {
justify-content: space-between;
padding: 1rem;
flex-shrink: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
min-height: 64px;
transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sidebar.is-collapsed .sidebar-header {
padding: 1rem 0.5rem;
justify-content: center;
}
.header-left {
flex: 1;
display: flex;
align-items: center;
overflow: hidden;
}
.sidebar.is-collapsed .header-left {
display: none;
}
.dark-theme .sidebar-header {
border-bottom-color: rgba(255, 255, 255, 0.06);
}
.sidebar-title {
font-weight: 700;
font-size: 16px;
color: var(--text-color);
letter-spacing: 0.3px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-light) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header-actions {
display: flex;
gap: 8px;
align-items: center;
}
.sidebar.is-collapsed .header-actions {
flex-direction: column;
gap: 12px;
}
.action-btn {
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.toggle-btn .el-icon {
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.toggle-btn .el-icon.rotate-180 {
transform: rotate(180deg);
}
.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);
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
transform: translateX(-10px);
}
.sidebar-content {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.el-menu {
border-right: none;
background: transparent;
flex-grow: 1;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
transition: none !important; /* Disable built-in transitions */
padding: 0.75rem 0.25rem;
transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.el-menu::-webkit-scrollbar {
width: 4px;
}
.el-menu::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
border-radius: 2px;
}
.el-menu::-webkit-scrollbar-track {
background: transparent;
}
.menu-section {
padding: 0 0.25rem;
margin-bottom: 0.5rem;
}
.section-title {
font-size: 11px;
font-weight: 700;
color: var(--text-color-secondary);
text-transform: uppercase;
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 {
display: none;
}
.menu-footer {
margin-top: auto;
border-top: 1px solid rgba(0, 0, 0, 0.04);
padding-top: 0.75rem;
transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.dark-theme .menu-footer {
border-top-color: rgba(255, 255, 255, 0.06);
}
:deep(.el-menu-item), :deep(.el-sub-menu__title) {
height: 48px;
line-height: 48px;
border-radius: var(--border-radius);
margin: 0.25rem 0.5rem;
height: 46px;
line-height: 46px;
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);
position: relative;
}
:deep(.el-menu-item::before), :deep(.el-sub-menu__title::before) {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 0;
background: var(--primary-color);
border-radius: 0 3px 3px 0;
transition: height 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
:deep(.el-menu-item:hover::before), :deep(.el-sub-menu__title:hover::before) {
height: 20px;
}
:deep(.el-menu-item.is-active) {
background-color: var(--primary-color);
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-light) 100%);
color: #fff;
font-weight: 600;
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.35);
}
:deep(.el-menu-item.is-active::before) {
height: 24px;
background: #fff;
}
:deep(.el-menu-item:hover), :deep(.el-sub-menu__title:hover) {
background-color: var(--primary-color-light);
background-color: rgba(64, 158, 255, 0.08);
color: var(--primary-color);
transform: translateX(2px);
}
.dark-theme :deep(.el-menu-item:hover),
.dark-theme :deep(.el-sub-menu__title:hover) {
background-color: rgba(64, 158, 255, 0.15);
}
.menu-item-title {
@@ -215,7 +372,7 @@ const renderMenu = (item) => {
align-items: center;
justify-content: space-between;
width: 100%;
gap: 5px;
gap: 8px;
}
.menu-item-text {
@@ -223,16 +380,22 @@ const renderMenu = (item) => {
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
transition: opacity 0.2s ease; /* Add transition for smooth fade */
opacity: 1;
font-size: 14px;
font-weight: 500;
}
.menu-item-actions {
display: none;
align-items: center;
gap: 5px;
transition: opacity 0.2s ease;
opacity: 1;
gap: 4px;
padding: 4px;
background: rgba(0, 0, 0, 0.04);
border-radius: 8px;
backdrop-filter: blur(8px);
}
.dark-theme .menu-item-actions {
background: rgba(255, 255, 255, 0.08);
}
.el-menu:not(.el-menu--collapse) .el-menu-item:hover .menu-item-actions,
@@ -242,27 +405,83 @@ const renderMenu = (item) => {
.el-menu--collapse .menu-item-text,
.el-menu--collapse .menu-item-actions {
opacity: 0; /* Fade out instead of just disappearing */
width: 0; /* Ensure it takes no space */
opacity: 0;
width: 0;
}
.edit-icon, .delete-icon {
cursor: pointer;
color: var(--text-color-secondary);
padding: 6px;
border-radius: 6px;
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.edit-icon:hover, .delete-icon:hover {
.edit-icon:hover {
color: var(--primary-color);
background: rgba(64, 158, 255, 0.12);
transform: scale(1.1);
}
.mobile-menu-header {
padding: 20px;
text-align: center;
border-bottom: 1px solid #e0e0e0;
.delete-icon:hover {
color: #f56c6c;
background: rgba(245, 108, 108, 0.12);
transform: scale(1.1);
}
.mobile-menu-header .username {
font-weight: bold;
font-size: 16px;
.user-info {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.25rem 1rem;
gap: 0.75rem;
background: linear-gradient(135deg, rgba(64, 158, 255, 0.1) 0%, rgba(64, 158, 255, 0.05) 100%);
border-radius: 16px;
margin: 0.5rem;
border: 1px solid rgba(64, 158, 255, 0.1);
}
.user-avatar {
background: linear-gradient(135deg, var(--primary-color) 0%, #66b1ff 100%);
color: #fff;
font-weight: 700;
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}
.username {
font-weight: 600;
font-size: 14px;
color: var(--text-color);
}
.guest-info {
display: flex;
gap: 0.75rem;
padding: 1rem;
justify-content: center;
}
.menu-item-trash {
color: var(--text-color-secondary) !important;
}
.menu-item-trash:hover {
color: #e6a23c !important;
background-color: rgba(230, 162, 60, 0.12) !important;
}
.menu-item-logout:hover {
color: #f56c6c !important;
background-color: rgba(245, 108, 108, 0.12) !important;
}
.sidebar.is-collapsed :deep(.el-menu-item),
.sidebar.is-collapsed :deep(.el-sub-menu__title) {
margin: 4px 0.25rem;
justify-content: center;
}
.sidebar.is-collapsed :deep(.el-icon) {
font-size: 20px;
}
</style>