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

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

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

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

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

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

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

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

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

build: 调整前端构建配置与模块加载方式

biji-qianduan/src/api/CommonApi.js

@@ -95,7 +95,7 @@ export const updateMarkdownTitle = (id, newName) => {
 }
 
 // 获取最近更新的笔记
-export const getRecentFiles = () => axiosApi.get('/api/markdown/recent');
+export const getRecentFiles = (limit = 16) => axiosApi.get(`/api/markdown/recent?limit=${limit}`);
 
 
 

biji-qianduan/src/components/HomePage.vue

@@ -56,12 +56,19 @@
               @upload-markdown="handleMarkdownUpload"
               @toggle-collapse="isCollapsed = !isCollapsed"
           />
-          <div class="note-list-wrapper">
+          <div class="note-list-wrapper" ref="noteListWrapper" @scroll="handleScroll">
             <NoteList
-                :files="groupMarkdownFiles"
+                :files="displayedFiles"
                 :is-user-logged-in="userStore.isLoggedIn"
                 @preview="previewFile"
             />
+            <div v-if="isLoadingMore" class="loading-more">
+              <el-icon class="is-loading"><Loading /></el-icon>
+              <span>加载中...</span>
+            </div>
+            <div v-else-if="hasMoreFiles && !showEditor && !selectedFile" class="load-more-trigger">
+              <el-button @click="loadMoreFiles" type="primary" plain>加载更多</el-button>
+            </div>
           </div>
         </div>
       </el-main>
@@ -157,7 +164,7 @@ import MoveNoteDialog from './home/dialogs/MoveNoteDialog.vue';
 import SystemSettingsDialog from './home/dialogs/SystemSettingsDialog.vue';
 import UpdatePasswordDialog from './home/dialogs/UpdatePasswordDialog.vue';
 import PrivacyDialog from './home/dialogs/PrivacyDialog.vue';
-import { Plus } from "@element-plus/icons-vue";
+import { Plus, Loading } from "@element-plus/icons-vue";
 
 // Basic Setup
 const userStore = useUserStore();
@@ -167,6 +174,11 @@ const router = useRouter();
 const searchKeyword = ref('');
 const categoryTree = ref([]);
 const groupMarkdownFiles = ref([]);
+const displayedFiles = ref([]);
+const currentPage = ref(0);
+const pageSize = ref(16);
+const isLoadingMore = ref(false);
+const noteListWrapper = ref(null);
 const showEditor = ref(false);
 const selectedFile = ref(null);
 const editData = ref(null);
@@ -188,6 +200,10 @@ const showPrivacyDialog = ref(false);
 const itemToRename = ref(null);
 const fileToImport = ref(null);
 
+const hasMoreFiles = computed(() => {
+  return displayedFiles.value.length < groupMarkdownFiles.value.length;
+});
+
 const resetEdit = () => {
   editData.value = null;
 };
@@ -234,11 +250,38 @@ const resetToHomeView = async () => {
   showEditor.value = false;
   searchKeyword.value = '';
   activeMenu.value = 'all';
+  currentPage.value = 0;
   try {
-    groupMarkdownFiles.value = await getRecentFiles() || [];
+    groupMarkdownFiles.value = await getRecentFiles(100) || [];
+    updateDisplayedFiles();
   } catch (error) {
     ElMessage.error('获取最近文件失败: ' + error.message);
     groupMarkdownFiles.value = [];
+    displayedFiles.value = [];
+  }
+};
+
+const updateDisplayedFiles = () => {
+  const start = 0;
+  const end = (currentPage.value + 1) * pageSize.value;
+  displayedFiles.value = groupMarkdownFiles.value.slice(start, end);
+};
+
+const loadMoreFiles = () => {
+  if (isLoadingMore.value || !hasMoreFiles.value) return;
+  isLoadingMore.value = true;
+  
+  setTimeout(() => {
+    currentPage.value++;
+    updateDisplayedFiles();
+    isLoadingMore.value = false;
+  }, 300);
+};
+
+const handleScroll = (e) => {
+  const { scrollTop, scrollHeight, clientHeight } = e.target;
+  if (scrollHeight - scrollTop - clientHeight < 100 && hasMoreFiles.value && !isLoadingMore.value) {
+    loadMoreFiles();
   }
 };
 
@@ -248,12 +291,15 @@ const handleSelectFile = async (data) => {
   try {
     const files = await markdownList(data.id);
     groupMarkdownFiles.value = files || [];
+    currentPage.value = 0;
+    updateDisplayedFiles();
     selectedFile.value = null;
     showEditor.value = false;
     activeMenu.value = `group-${data.id}`;
   } catch (error) {
     ElMessage.error('获取笔记列表失败: ' + error.message);
     groupMarkdownFiles.value = [];
+    displayedFiles.value = [];
   }
 };
 
@@ -272,30 +318,45 @@ const handleCreateNote = (payload) => {
 
 const handleEditorBack = (data) => {
   showEditor.value = false;
-  previewFile(data);
+  if (data && data.id) {
+    const fileWithGrouping = {
+      ...data,
+      groupingName: data.groupingName || getCategoryName(data.groupingId)
+    };
+    selectedFile.value = fileWithGrouping;
+  } else {
+    selectedFile.value = null;
+    resetToHomeView();
+  }
+};
+
+const getCategoryName = (groupId) => {
+  if (!groupId) return '';
+  const findName = (items) => {
+    for (const item of items) {
+      if (item.id === groupId) return item.grouping;
+      if (item.children) {
+        const name = findName(item.children);
+        if (name) return name;
+      }
+    }
+    return null;
+  };
+  return findName(categoryTree.value) || '';
 };
 
 const handleSaveSuccess = (updatedFile) => {
   selectedFile.value = updatedFile;
-  // 修复：保存成功后不退出编辑页面
-  // showEditor.value = false;
 
   const index = groupMarkdownFiles.value.findIndex(f => f.id === updatedFile.id);
   if (index !== -1) {
     groupMarkdownFiles.value[index] = updatedFile;
   } else {
-    // 如果是新创建的笔记（之前ID为null），添加到列表开头
     groupMarkdownFiles.value.unshift(updatedFile);
   }
-
+  
+  updateDisplayedFiles();
   fetchGroupings();
-
-  // 延迟清空 editData，确保所有响应式更新完成后再清理状态
-  // Delay clearing editData to ensure all reactive updates are complete before cleaning up the state.
-  setTimeout(() => {
-    // 修复：保存成功后不清空editData，保持编辑状态
-    // resetEdit();
-  }, 100); // A short delay is usually sufficient
 };
 
 const previewFile = async (file) => {
@@ -390,6 +451,8 @@ const handleSearch = async () => {
   }
   try {
     groupMarkdownFiles.value = await searchMarkdown(searchKeyword.value) || [];
+    currentPage.value = 0;
+    updateDisplayedFiles();
     selectedFile.value = null;
     showEditor.value = false;
     activeMenu.value = 'search';
@@ -569,4 +632,19 @@ watch([selectedFile, showEditor], ([newFile, newShowEditor]) => {
   height: 56px;
   box-shadow: 0 4px 12px rgba(0,0,0,.15);
 }
+
+.loading-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  gap: 8px;
+  color: var(--text-color-secondary);
+}
+
+.load-more-trigger {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+}
 </style>

biji-qianduan/src/components/RegisterPage.vue

@@ -76,8 +76,14 @@ const validatePass = (rule, value, callback) => {
 };
 
 const registerRules = {
-  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 2, max: 8, message: '用户名长度必须在2-8位之间', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 12, message: '密码长度必须在6-12位之间', trigger: 'blur' }
+  ],
   confirmPassword: [{ validator: validatePass, trigger: 'blur' }],
   registrationCode: [{ required: true, message: '请输入注册码', trigger: 'blur' }],
 };

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

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>

biji-qianduan/src/stores/user.js

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
-import { login as loginApi } from '../api/CommonApi'; // 假设你的API调用函数是这样组织的
+import { login as loginApi } from '../api/CommonApi';
 
 export const useUserStore = defineStore('user', {
   state: () => ({
@@ -13,8 +12,9 @@ export const useUserStore = defineStore('user', {
         const response = await loginApi({ username, password });
         if (response && response.token) {
           this.token = response.token;
-          // 你可能还需要一个接口来获取用户信息
-          // this.userInfo = await getUserInfo();
+          if (response.userInfo) {
+            this.userInfo = response.userInfo;
+          }
           return true;
         }
         return false;