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

refactor: 重构用户登录注册逻辑与数据验证 fix: 修复图片上传安全漏洞与路径处理问题 perf: 优化笔记列表分页加载与滚动性能 style: 改进侧边栏菜单的视觉设计与交互体验 chore: 更新环境变量与数据库连接配置 docs: 添加用户信息视图对象的Swagger文档 test: 增加用户注册登录的输入验证测试 ci: 配置JWT密钥环境变量与安全设置 build: 调整前端构建配置与模块加载方式
2026-03-02 02:01:01 +08:00
parent c9c21df0f0
commit 392cc52fd2
23 changed files with 811 additions and 282 deletions
--- a/biji-qianduan/src/components/home/NoteEditor.vue
+++ b/biji-qianduan/src/components/home/NoteEditor.vue
@@ -3,7 +3,7 @@
    <el-header class="editor-header">
      <h2 class="editor-title">{{ editData.title }}</h2>
      <div class="actions">
-        <el-button type="primary" @click="$emit('back', editData)">返回</el-button>
+        <el-button type="primary" @click="handleBack">返回</el-button>
        <el-button type="success" @click="save">保存</el-button>
        <span class="save-status">{{ saveStatus }}</span>
      </div>
@@ -29,13 +29,18 @@ const props = defineProps({
 const emit = defineEmits(['back', 'update:editData']);

 const vditor = ref(null);
-const bijiId=ref(null);
-
+const currentId = ref(null);
+const isInitialized = ref(false);
 const saveStatus = ref('');
 let saveTimeout = null;
-const isProgrammaticChange = ref(false);
+let lastSavedContent = ref('');
+let isSaving = ref(false);

 const initVditor = () => {
+  if (vditor.value) {
+    vditor.value.destroy();
+  }
+  
  vditor.value = new Vditor('vditor-editor', {
    height: 'calc(100vh - 120px)',
    mode: 'ir',
@@ -43,23 +48,26 @@ const initVditor = () => {
      enable: false,
    },
    after: () => {
-    if (props.editData && props.editData.content) {
-    isProgrammaticChange.value = true;
-    vditor.value.setValue(props.editData.content);
-    isProgrammaticChange.value = false;
-    }
-    vditor.value.focus();
+      isInitialized.value = true;
+      if (props.editData && props.editData.content) {
+        vditor.value.setValue(props.editData.content);
+        lastSavedContent.value = props.editData.content;
+      }
+      if (props.editData && props.editData.id) {
+        currentId.value = props.editData.id;
+      }
+      vditor.value.focus();
    },
    input: (value) => {
-      if (isProgrammaticChange.value) {
-        return;
-      }
-      // 启动定时器，延迟5秒后执行保存
+      if (!isInitialized.value) return;
+      
      clearTimeout(saveTimeout);
      saveStatus.value = '正在输入...';
      saveTimeout = setTimeout(() => {
-        save(value);
-      }, 5000);
+        if (!isSaving.value && value !== lastSavedContent.value) {
+          save(value);
+        }
+      }, 3000);
    },
    upload: {
      accept: 'image/*',
@@ -69,7 +77,6 @@ const initVditor = () => {

        uploadImage(file).then(res => {
          const url = res.url;
-          // 使用 file.name 替代 files.name 保证一致性
          const baseUrl = import.meta.env.VITE_API_BASE_URL || '';
          vditor.value.insertValue(`![${file.name}](${baseUrl}${url})`);
        }).catch(() => {
@@ -81,33 +88,72 @@ const initVditor = () => {
 };

 const save = async (value) => {
+  if (isSaving.value) return;
+  
  clearTimeout(saveTimeout);
  const content = typeof value === 'string' ? value : vditor.value.getValue();
+  
+  if (content === lastSavedContent.value && currentId.value) {
+    return;
+  }
+  
+  isSaving.value = true;
  try {
    saveStatus.value = '正在保存...';
-    // 发送完整的笔记对象，确保包含所有必要字段
-    const response = await updateMarkdown({ 
-      id: props.editData.id? props.editData.id : bijiId.value,
+    
+    const payload = { 
+      id: currentId.value || props.editData.id || null,
      content: content,
      title: props.editData.title,
      groupingId: props.editData.groupingId,
      fileName: props.editData.fileName,
      isPrivate: props.editData.isPrivate
-    });
-    // 确保获取到后端返回的数据，包括可能的新ID
-
-    bijiId.value = response.id;
-    // 保存成功，更新状态
-    saveStatus.value = '已保存';
-    // 发送更新后的笔记数据（包含可能的新ID）
-    emit('update:editData', { ...props.editData, content: content });
+    };
+    
+    const response = await updateMarkdown(payload);
+    
+    if (response && response.id) {
+      currentId.value = response.id;
+      lastSavedContent.value = content;
+      
+      const updatedFile = {
+        ...props.editData,
+        id: response.id,
+        content: content,
+        groupingId: response.groupingId,
+        groupingName: response.groupingName,
+        title: response.title,
+        isPrivate: response.isPrivate
+      };
+      
+      emit('update:editData', updatedFile);
+      saveStatus.value = '已保存';
+    }
  } catch (error) {
-    // 保存失败，更新状态并显示错误消息
    saveStatus.value = '保存失败';
    ElMessage.error('保存失败: ' + (error.message || '未知错误'));
+  } finally {
+    isSaving.value = false;
  }
 };

+const handleBack = async () => {
+  const content = vditor.value ? vditor.value.getValue() : '';
+  if (content !== lastSavedContent.value && !isSaving.value) {
+    await save(content);
+  }
+  
+  const returnData = {
+    ...props.editData,
+    id: currentId.value || props.editData.id,
+    content: content,
+    groupingId: props.editData.groupingId,
+    groupingName: props.editData.groupingName
+  };
+  
+  emit('back', returnData);
+};
+
 onMounted(() => {
  initVditor();
 });
@@ -116,27 +162,17 @@ onBeforeUnmount(() => {
  clearTimeout(saveTimeout);
  if (vditor.value) {
    vditor.value.destroy();
+    vditor.value = null;
  }
-  if (bijiId.value){
-    // 发送完整的笔记对象，确保包含所有必要字段
-    updateMarkdown({ 
-      id: bijiId.value,
-      content: vditor.value.getValue(),
-      title: props.editData.title,
-      groupingId: props.editData.groupingId,
-      fileName: props.editData.fileName,
-      isPrivate: props.editData.isPrivate
-    });
-  }
-  // 离开页面后清空 bijiId.value 变量
-  bijiId.value = null;
+  currentId.value = null;
+  isInitialized.value = false;
 });

 watch(() => props.editData, (newVal, oldVal) => {
-  if (vditor.value && newVal && newVal.id !== oldVal?.id) {
-    isProgrammaticChange.value = true;
+  if (vditor.value && isInitialized.value && newVal && newVal.id !== oldVal?.id) {
    vditor.value.setValue(newVal.content || '');
-    isProgrammaticChange.value = false;
+    lastSavedContent.value = newVal.content || '';
+    currentId.value = newVal.id;
    saveStatus.value = '';
  }
 }, { deep: true });
--- a/biji-qianduan/src/components/home/SidebarMenu.vue
+++ b/biji-qianduan/src/components/home/SidebarMenu.vue
@@ -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>