From 5fade7f8bd2ad156ad277feee6ab946f96b10b08 Mon Sep 17 00:00:00 2001 From: ikmkj <1@qq,com> Date: Fri, 8 Aug 2025 19:10:14 +0800 Subject: [PATCH 01/11] =?UTF-8?q?(mfeatobile):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E8=8F=9C=E5=8D=95=E5=B9=B6=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E7=9B=B8=E5=85=B3=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 优化移动端侧边栏菜单的显示逻辑 - 添加移动端特有的菜单项,包括用户信息、系统管理等 - 实现移动菜单的折叠和展开功能 - 新增移动端创建笔记的浮动按钮 -优化样式,增加侧边栏遮罩和菜单头部样式 --- biji-qianduan/src/components/HomePage.vue | 87 ++++++++++++++++++++++- 1 file changed, 84 insertions(+), 3 deletions(-) diff --git a/biji-qianduan/src/components/HomePage.vue b/biji-qianduan/src/components/HomePage.vue index 8e8408f..ee4598f 100644 --- a/biji-qianduan/src/components/HomePage.vue +++ b/biji-qianduan/src/components/HomePage.vue @@ -1,7 +1,7 @@ + + + +
+ +
+ 登录 + 注册 +
+
+ + + + + + + + + + + + + + + + + + +
@@ -321,6 +360,17 @@ + + + + + @@ -347,7 +397,7 @@ import { generateRegistrationCode, updatePassword } from '@/api/CommonApi.js' -import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled, Menu, User, Back } from "@element-plus/icons-vue"; +import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled, Menu, User, Back, Setting, SwitchButton } from "@element-plus/icons-vue"; import { useUserStore } from '../stores/user'; import { useRouter } from 'vue-router'; import { privateNoteContent } from '../utils/privateNoteContent.js'; @@ -362,7 +412,7 @@ const groupMarkdownFiles = ref([]); const showEditor = ref(false); const selectedFile = ref(null); const activeMenu = ref('all'); -const isCollapsed = ref(true); +const isCollapsed = ref(window.innerWidth < 768); const showCreateGroupDialog = ref(false); const showCreateNoteDialog = ref(false); const showRenameDialog = ref(false); @@ -1567,3 +1617,34 @@ display: flex; align-items: center; gap: 10px; } + +.sidebar-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1000; +} + +.fab { + position: fixed; + bottom: 80px; + right: 20px; + z-index: 100; + width: 56px; + height: 56px; + box-shadow: 0 4px 12px rgba(0,0,0,.15); +} + +.mobile-menu-header { + padding: 20px; + text-align: center; + border-bottom: 1px solid #e0e0e0; +} + +.mobile-menu-header .username { + font-weight: bold; + font-size: 16px; +} \ No newline at end of file From f00b60ddb7e5bd93bd2b83974f7363ab125d15dd Mon Sep 17 00:00:00 2001 From: ikmkj <1@qq,com> Date: Fri, 8 Aug 2025 19:16:11 +0800 Subject: [PATCH 02/11] =?UTF-8?q?style(qianduan):=20=E7=A7=BB=E9=99=A4?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=8A=98=E5=8F=A0=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 ElMenu 组件中添加 :collapse-transition="false" 属性,关闭折叠动画效果 --- biji-qianduan/src/components/HomePage.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/biji-qianduan/src/components/HomePage.vue b/biji-qianduan/src/components/HomePage.vue index ee4598f..9b2f7a7 100644 --- a/biji-qianduan/src/components/HomePage.vue +++ b/biji-qianduan/src/components/HomePage.vue @@ -39,6 +39,7 @@ :default-active="activeMenu" class="el-menu-vertical-demo" :collapse="isCollapsed" + :collapse-transition="false" >
From c28b12ecd1ae9e4b4bd1462b18539776f8b6182e Mon Sep 17 00:00:00 2001 From: ikmkj <1@qq,com> Date: Fri, 8 Aug 2025 20:19:52 +0800 Subject: [PATCH 03/11] =?UTF-8?q?feat(components):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E5=88=9B=E5=BB=BA=E5=88=86=E7=B1=BB=E5=92=8C=E7=AC=94=E8=AE=B0?= =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E6=A1=86=E5=8F=8A=E5=A4=B4=E9=83=A8=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 CreateGroupDialog 组件用于创建分类 - 新增 CreateNoteDialog 组件用于创建笔记 - 新增 HomeHeader 组件用于显示主页头部信息 - 对话框组件使用 Element Plus 样式- 头部组件包含用户操作按钮和搜索功能 --- biji-qianduan/src/components/HomePage.vue | 1732 +++-------------- .../src/components/home/HomeHeader.vue | 172 ++ .../src/components/home/NoteEditor.vue | 172 ++ .../src/components/home/NoteList.vue | 80 + .../src/components/home/NotePreview.vue | 140 ++ .../src/components/home/SidebarMenu.vue | 262 +++ .../home/dialogs/CreateGroupDialog.vue | 90 + .../home/dialogs/CreateNoteDialog.vue | 109 ++ .../home/dialogs/MoveNoteDialog.vue | 81 + .../components/home/dialogs/PrivacyDialog.vue | 91 + .../components/home/dialogs/RenameDialog.vue | 65 + .../home/dialogs/SelectGroupDialog.vue | 88 + .../home/dialogs/SystemSettingsDialog.vue | 98 + .../home/dialogs/UpdatePasswordDialog.vue | 97 + 14 files changed, 1852 insertions(+), 1425 deletions(-) create mode 100644 biji-qianduan/src/components/home/HomeHeader.vue create mode 100644 biji-qianduan/src/components/home/NoteEditor.vue create mode 100644 biji-qianduan/src/components/home/NoteList.vue create mode 100644 biji-qianduan/src/components/home/NotePreview.vue create mode 100644 biji-qianduan/src/components/home/SidebarMenu.vue create mode 100644 biji-qianduan/src/components/home/dialogs/CreateGroupDialog.vue create mode 100644 biji-qianduan/src/components/home/dialogs/CreateNoteDialog.vue create mode 100644 biji-qianduan/src/components/home/dialogs/MoveNoteDialog.vue create mode 100644 biji-qianduan/src/components/home/dialogs/PrivacyDialog.vue create mode 100644 biji-qianduan/src/components/home/dialogs/RenameDialog.vue create mode 100644 biji-qianduan/src/components/home/dialogs/SelectGroupDialog.vue create mode 100644 biji-qianduan/src/components/home/dialogs/SystemSettingsDialog.vue create mode 100644 biji-qianduan/src/components/home/dialogs/UpdatePasswordDialog.vue diff --git a/biji-qianduan/src/components/HomePage.vue b/biji-qianduan/src/components/HomePage.vue index 9b2f7a7..4c1e6ef 100644 --- a/biji-qianduan/src/components/HomePage.vue +++ b/biji-qianduan/src/components/HomePage.vue @@ -1,370 +1,76 @@ + - -/* 对话框样式 */ -:deep(.el-dialog) { -border-radius: var(--border-radius); -background-color: var(--bg-color-secondary); -} - -:deep(.el-dialog__header) { -border-bottom: 1px solid var(--border-color); -padding: 1.5rem; -} - -:deep(.el-dialog__title) { -font-size: 1.25rem; -font-weight: 600; -color: var(--text-color); -} - -:deep(.el-dialog__body) { -padding: 1.5rem; -} - -:deep(.el-dialog__footer) { -padding: 1.5rem; -border-top: 1px solid var(--border-color); -} - -.welcome-text { -white-space: nowrap; -} -.user-actions, .guest-actions { -display: flex; -align-items: center; -gap: 10px; -} - .sidebar-overlay { position: fixed; top: 0; @@ -1638,14 +530,4 @@ gap: 10px; height: 56px; box-shadow: 0 4px 12px rgba(0,0,0,.15); } - -.mobile-menu-header { - padding: 20px; - text-align: center; - border-bottom: 1px solid #e0e0e0; -} - -.mobile-menu-header .username { - font-weight: bold; - font-size: 16px; -} \ No newline at end of file + diff --git a/biji-qianduan/src/components/home/HomeHeader.vue b/biji-qianduan/src/components/home/HomeHeader.vue new file mode 100644 index 0000000..04cfe22 --- /dev/null +++ b/biji-qianduan/src/components/home/HomeHeader.vue @@ -0,0 +1,172 @@ + + + + + diff --git a/biji-qianduan/src/components/home/NoteEditor.vue b/biji-qianduan/src/components/home/NoteEditor.vue new file mode 100644 index 0000000..cc54b78 --- /dev/null +++ b/biji-qianduan/src/components/home/NoteEditor.vue @@ -0,0 +1,172 @@ + + + + + diff --git a/biji-qianduan/src/components/home/NoteList.vue b/biji-qianduan/src/components/home/NoteList.vue new file mode 100644 index 0000000..d2cfa21 --- /dev/null +++ b/biji-qianduan/src/components/home/NoteList.vue @@ -0,0 +1,80 @@ + + + + + diff --git a/biji-qianduan/src/components/home/NotePreview.vue b/biji-qianduan/src/components/home/NotePreview.vue new file mode 100644 index 0000000..152d774 --- /dev/null +++ b/biji-qianduan/src/components/home/NotePreview.vue @@ -0,0 +1,140 @@ + + + + + diff --git a/biji-qianduan/src/components/home/SidebarMenu.vue b/biji-qianduan/src/components/home/SidebarMenu.vue new file mode 100644 index 0000000..fd9692c --- /dev/null +++ b/biji-qianduan/src/components/home/SidebarMenu.vue @@ -0,0 +1,262 @@ + + + + + diff --git a/biji-qianduan/src/components/home/dialogs/CreateGroupDialog.vue b/biji-qianduan/src/components/home/dialogs/CreateGroupDialog.vue new file mode 100644 index 0000000..72723c5 --- /dev/null +++ b/biji-qianduan/src/components/home/dialogs/CreateGroupDialog.vue @@ -0,0 +1,90 @@ + + + diff --git a/biji-qianduan/src/components/home/dialogs/CreateNoteDialog.vue b/biji-qianduan/src/components/home/dialogs/CreateNoteDialog.vue new file mode 100644 index 0000000..976de75 --- /dev/null +++ b/biji-qianduan/src/components/home/dialogs/CreateNoteDialog.vue @@ -0,0 +1,109 @@ + + + + + diff --git a/biji-qianduan/src/components/home/dialogs/MoveNoteDialog.vue b/biji-qianduan/src/components/home/dialogs/MoveNoteDialog.vue new file mode 100644 index 0000000..dbd48a1 --- /dev/null +++ b/biji-qianduan/src/components/home/dialogs/MoveNoteDialog.vue @@ -0,0 +1,81 @@ + + + diff --git a/biji-qianduan/src/components/home/dialogs/PrivacyDialog.vue b/biji-qianduan/src/components/home/dialogs/PrivacyDialog.vue new file mode 100644 index 0000000..2b1584b --- /dev/null +++ b/biji-qianduan/src/components/home/dialogs/PrivacyDialog.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/biji-qianduan/src/components/home/dialogs/RenameDialog.vue b/biji-qianduan/src/components/home/dialogs/RenameDialog.vue new file mode 100644 index 0000000..5b06fc0 --- /dev/null +++ b/biji-qianduan/src/components/home/dialogs/RenameDialog.vue @@ -0,0 +1,65 @@ + + + diff --git a/biji-qianduan/src/components/home/dialogs/SelectGroupDialog.vue b/biji-qianduan/src/components/home/dialogs/SelectGroupDialog.vue new file mode 100644 index 0000000..c2d83ed --- /dev/null +++ b/biji-qianduan/src/components/home/dialogs/SelectGroupDialog.vue @@ -0,0 +1,88 @@ + + + diff --git a/biji-qianduan/src/components/home/dialogs/SystemSettingsDialog.vue b/biji-qianduan/src/components/home/dialogs/SystemSettingsDialog.vue new file mode 100644 index 0000000..e80befa --- /dev/null +++ b/biji-qianduan/src/components/home/dialogs/SystemSettingsDialog.vue @@ -0,0 +1,98 @@ + + + diff --git a/biji-qianduan/src/components/home/dialogs/UpdatePasswordDialog.vue b/biji-qianduan/src/components/home/dialogs/UpdatePasswordDialog.vue new file mode 100644 index 0000000..ce78999 --- /dev/null +++ b/biji-qianduan/src/components/home/dialogs/UpdatePasswordDialog.vue @@ -0,0 +1,97 @@ + + + From 22f0e9757591676b976f4b227acd0b7da1e429ed Mon Sep 17 00:00:00 2001 From: ikmkj <1@qq,com> Date: Fri, 8 Aug 2025 20:28:32 +0800 Subject: [PATCH 04/11] =?UTF-8?q?style(biji-qianduan):=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E7=A7=BB=E5=8A=A8=E7=AB=AF=E4=BE=A7=E8=BE=B9=E6=A0=8F?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 移除 .home-page.is-mobile .sidebar 的 transform属性,使用 overflow:hidden 避免内容溢出 -调整 .home-page.is-mobile .sidebar:not(.is-collapsed) 的样式,移除 transform - 修改 SidebarMenu 组件的 transition 属性,应用到 width 上 --- biji-qianduan/src/assets/styles/mobile.css | 5 ++--- biji-qianduan/src/components/home/SidebarMenu.vue | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/biji-qianduan/src/assets/styles/mobile.css b/biji-qianduan/src/assets/styles/mobile.css index 2c4f357..d4c3f61 100644 --- a/biji-qianduan/src/assets/styles/mobile.css +++ b/biji-qianduan/src/assets/styles/mobile.css @@ -6,14 +6,13 @@ .home-page.is-mobile .sidebar { position: absolute; z-index: 1001; - transition: transform 0.3s ease; height: 100%; - transform: translateX(-100%); background-color: #fff; /* 确保侧边栏有背景色 */ + overflow: hidden; /* 避免内容在折叠过程中溢出 */ } .home-page.is-mobile .sidebar:not(.is-collapsed) { - transform: translateX(0); + /* No transform needed, width is controlled by component */ } .home-page.is-mobile .content { diff --git a/biji-qianduan/src/components/home/SidebarMenu.vue b/biji-qianduan/src/components/home/SidebarMenu.vue index fd9692c..b098f76 100644 --- a/biji-qianduan/src/components/home/SidebarMenu.vue +++ b/biji-qianduan/src/components/home/SidebarMenu.vue @@ -164,7 +164,7 @@ const renderMenu = (item) => { background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border-right: 1px solid rgba(0, 0, 0, 0.05); - transition: width var(--transition-duration) ease; + transition: width 0.3s ease; /* Apply transition to width */ display: flex; flex-direction: column; } From 460337abfa103d462fb77db8163717ca7b25f715 Mon Sep 17 00:00:00 2001 From: ikmkj <1@qq,com> Date: Fri, 8 Aug 2025 20:31:08 +0800 Subject: [PATCH 05/11] =?UTF-8?q?style(SidebarMenu):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E9=A1=B9=E6=B7=A1=E5=85=A5=E6=B7=A1=E5=87=BA?= =?UTF-8?q?=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 为菜单项文本和操作添加过渡效果,实现平滑淡入淡出 - 修改菜单项折叠时的样式,使用透明度和宽度变化来实现淡出效果 --- biji-qianduan/src/components/home/SidebarMenu.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/biji-qianduan/src/components/home/SidebarMenu.vue b/biji-qianduan/src/components/home/SidebarMenu.vue index b098f76..9b1823a 100644 --- a/biji-qianduan/src/components/home/SidebarMenu.vue +++ b/biji-qianduan/src/components/home/SidebarMenu.vue @@ -222,12 +222,16 @@ const renderMenu = (item) => { overflow: hidden; text-overflow: ellipsis; flex-grow: 1; + transition: opacity 0.2s ease; /* Add transition for smooth fade */ + opacity: 1; } .menu-item-actions { display: none; align-items: center; gap: 5px; + transition: opacity 0.2s ease; + opacity: 1; } .el-menu:not(.el-menu--collapse) .el-menu-item:hover .menu-item-actions, @@ -237,7 +241,8 @@ const renderMenu = (item) => { .el-menu--collapse .menu-item-text, .el-menu--collapse .menu-item-actions { - display: none; + opacity: 0; /* Fade out instead of just disappearing */ + width: 0; /* Ensure it takes no space */ } .edit-icon, .delete-icon { From 612d23b97a034a01a2796dd57a9c54d08b20ec4c Mon Sep 17 00:00:00 2001 From: ikmkj <1@qq,com> Date: Fri, 8 Aug 2025 20:35:28 +0800 Subject: [PATCH 06/11] =?UTF-8?q?style:=E7=A6=81=E7=94=A8=E4=BE=A7?= =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E8=8F=9C=E5=8D=95=E7=9A=84=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E8=BF=87=E6=B8=A1=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 SidebarMenu.vue 组件中,添加 transition 属性以禁用内置的过渡动画 - 此修改确保侧边栏菜单在展开/收起时不会出现不必要的动画效果 --- biji-qianduan/src/components/home/SidebarMenu.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/biji-qianduan/src/components/home/SidebarMenu.vue b/biji-qianduan/src/components/home/SidebarMenu.vue index 9b1823a..3e96971 100644 --- a/biji-qianduan/src/components/home/SidebarMenu.vue +++ b/biji-qianduan/src/components/home/SidebarMenu.vue @@ -188,6 +188,7 @@ const renderMenu = (item) => { flex-grow: 1; overflow-y: auto; overflow-x: hidden; + transition: none !important; /* Disable built-in transitions */ } :deep(.el-menu-item), :deep(.el-sub-menu__title) { From 213901b136c6f0b74c4ac5f6d2302a502ce517cc Mon Sep 17 00:00:00 2001 From: ikmkj <1@qq,com> Date: Fri, 8 Aug 2025 20:50:27 +0800 Subject: [PATCH 07/11] =?UTF-8?q?style(biji-qianduan):=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=82=AC=E6=B5=AE=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F-=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=82=AC=E6=B5=AE=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=E6=8C=89=E9=92=AE=EF=BC=88FAB=EF=BC=89=E7=9A=84?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20-=E8=B0=83=E6=95=B4=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E3=80=81=E5=A4=A7=E5=B0=8F=E5=92=8C=E9=98=B4?= =?UTF-8?q?=E5=BD=B1=E6=95=88=E6=9E=9C=20-=20=E6=B7=BB=E5=8A=A0=E6=82=AC?= =?UTF-8?q?=E5=81=9C=E6=94=BE=E5=A4=A7=E6=95=88=E6=9E=9C=20-=20=E8=B0=83?= =?UTF-8?q?=E6=95=B4=E5=9B=BE=E6=A0=87=E5=A4=A7=E5=B0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- biji-qianduan/src/assets/styles/mobile.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/biji-qianduan/src/assets/styles/mobile.css b/biji-qianduan/src/assets/styles/mobile.css index d4c3f61..8224fc4 100644 --- a/biji-qianduan/src/assets/styles/mobile.css +++ b/biji-qianduan/src/assets/styles/mobile.css @@ -120,4 +120,24 @@ /* 针对回收站的卡片式布局 (默认隐藏) */ .trash-cards { display: none; +} + +/* 优化移动端悬浮操作按钮 (FAB) */ +.fab { + position: fixed !important; + right: 25px !important; + bottom: 90px !important; /* 调整位置以避开主题切换按钮 */ + z-index: 1050 !important; + width: 56px !important; + height: 56px !important; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; + transition: transform 0.2s ease-in-out !important; +} + +.fab:hover { + transform: scale(1.05); /* 添加轻微的悬停放大效果 */ +} + +.fab .el-icon { + font-size: 24px; /* 调整图标大小 */ } \ No newline at end of file From 421c4c109136c374532c06c1c8af6aeb60ce16cc Mon Sep 17 00:00:00 2001 From: ikmkj <1@qq,com> Date: Fri, 8 Aug 2025 21:10:30 +0800 Subject: [PATCH 08/11] =?UTF-8?q?refactor(NoteList):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E7=AC=94=E8=AE=B0=E5=88=97=E8=A1=A8=E5=8D=A1=E7=89=87=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 增加了笔记列表项的样式层次,添加了文件图标和元信息 - 调整了卡片的样式,包括颜色、阴影和圆角等 - 优化了暗黑主题下的样式 -改进了鼠标悬停效果 --- .../src/components/home/NoteList.vue | 73 ++++++++++++++----- 1 file changed, 55 insertions(+), 18 deletions(-) diff --git a/biji-qianduan/src/components/home/NoteList.vue b/biji-qianduan/src/components/home/NoteList.vue index d2cfa21..21f4770 100644 --- a/biji-qianduan/src/components/home/NoteList.vue +++ b/biji-qianduan/src/components/home/NoteList.vue @@ -7,10 +7,15 @@ class="file-item" :class="{ 'private-note': file.isPrivate === 1 }" > -
- {{ file.title }} - {{ file.groupingName }} - +
+
+ + {{ file.title }} +
+
+ {{ file.groupingName }} + +
@@ -18,7 +23,7 @@