From 5736cbd51f1c6f8621ebf6b068d470d082a50940 Mon Sep 17 00:00:00 2001
From: dinphy <dinphy1205@126.com>
Date: Sun, 25 Aug 2024 21:38:47 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AFUI=20-=20=E4=BE=A7=E8=BE=B9=E6=A0=8F=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=87=B3=E4=BB=8E=E5=BA=95=E9=83=A8=E6=BB=91?=
 =?UTF-8?q?=E5=87=BA=20-=20=E5=88=86=E7=A6=BB=E7=BD=AE=E9=A1=B6=E3=80=81?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=92=8C=E5=88=A0=E9=99=A4=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=EF=BC=8C=E7=A7=BB=E8=87=B3memo=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=8C=E7=82=B9=E5=87=BB=E7=BD=AE=E9=A1=B6=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E6=97=81=E7=9A=84=E5=9B=BE=E6=A0=87=E4=BB=8E=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E6=BB=91=E5=87=BA=20-=20=E6=9B=B4=E6=8D=A2=E4=BA=86?=
 =?UTF-8?q?=E5=87=A0=E4=B8=AA=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/components/Header.vue    |  9 ++--
 front/components/Memo.vue      | 77 +++++++++++++++++++---------------
 front/components/MobileNav.vue | 49 ++++++++++------------
 front/layouts/default.vue      |  6 +--
 4 files changed, 73 insertions(+), 68 deletions(-)

diff --git a/front/components/Header.vue b/front/components/Header.vue
index 72da86f0..f0ab9703 100644
--- a/front/components/Header.vue
+++ b/front/components/Header.vue
@@ -3,7 +3,7 @@
 
     <div
         class="dark:bg-neutral-800 hidden sm:flex sm:absolute sm:-right-10 sm:rounded sm:p-2 sm:flex-col sm:w-fit justify-end shadow w-full flex-row  top-0  p-1 flex  gap-2 bg-white ">
-      <NuxtLink to="/" v-if="$route.path !== '/'" title="去首页">
+      <NuxtLink to="/" v-if="$route.path !== '/'" title="返回主页">
         <UIcon name="i-carbon-arrow-left" class="text-[#9fc84a] w-5 h-5 cursor-pointer"/>
       </NuxtLink>
       <svg v-if="mode==='light'" @click="toggleMode" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
@@ -32,7 +32,7 @@
       </svg>
 
 
-      <NuxtLink to="/new" v-if="global.userinfo.token " title="发言">
+      <NuxtLink to="/new" v-if="global.userinfo.token " title="发表">
         <UIcon name="i-carbon-edit" class="text-[#9fc84a] w-5 h-5 cursor-pointer"/>
       </NuxtLink>
       <NuxtLink to="/user/calendar" v-if="global.userinfo.token" title="日历">
@@ -42,13 +42,12 @@
       <NuxtLink to="/sys/settings" v-if="global.userinfo.id === 1" title="系统设置">
         <UIcon name="i-carbon-settings" class="text-[#9fc84a] w-5 h-5 cursor-pointer"/>
       </NuxtLink>
-      <NuxtLink to="/user/settings" v-if="global.userinfo.token" title="用户设置">
-        <UIcon name="i-carbon-user-profile" class="text-[#9fc84a] w-5 h-5 cursor-pointer"/>
+      <NuxtLink to="/user/settings" v-if="global.userinfo.token" title="用户中心">
+        <UIcon name="i-carbon-user-avatar" class="text-[#9fc84a] w-5 h-5 cursor-pointer"/>
       </NuxtLink>
       <NuxtLink to="/user/login" v-if="!global.userinfo.token" title="登录">
         <UIcon name="i-carbon-login" class="text-[#9fc84a] w-5 h-5 cursor-pointer"/>
       </NuxtLink>
-
     </div>
 
     <img class="header-img w-full" :src="props.user.coverUrl"
diff --git a/front/components/Memo.vue b/front/components/Memo.vue
index 6aaac228..3609742f 100644
--- a/front/components/Memo.vue
+++ b/front/components/Memo.vue
@@ -13,8 +13,11 @@
       <div class="flex flex-col gap-1  flex-1">
         <div class="username text-[#576b95] mb-1 dark:text-white  flex justify-between">
           <NuxtLink class="cursor-pointer" :to="`/user/${item.user.id}`">{{ item.user.nickname }}</NuxtLink>
-          <UIcon v-if="item.pinned" name="i-carbon-pin"/>
-          <UIcon v-if="item.showType === 0" name="i-carbon-locked" class="text-red-500"/>
+          <div>
+            <UIcon v-if="item.pinned" name="i-carbon-pin"/>
+            <UIcon v-if="item.showType === 0" name="i-carbon-locked" class="text-red-500 ml-2 dark:text-white"/>
+            <UIcon @click="moreToolbar = true" v-if="global.userinfo.token && $route.path === `/memo/${item.id}`" name="i-carbon-overflow-menu-vertical" class="text-red-500 ml-2 dark:text-white cursor-pointer"/>
+          </div>
         </div>
         <div class="mb-2">
           <div :style="getMemoMaxHeightStyle()" class="overflow-hidden">
@@ -70,44 +73,47 @@
           </div>
 
           <div ref="toolbarRef" v-if="showToolbar"
-               class="absolute top-[-8px] right-[32px] bg-[#4c4c4c] rounded text-white p-2 px-4">
+               class="absolute top-[-8px] right-[32px] bg-[#4c4c4c] rounded text-white p-2">
             <div class="flex flex-row gap-2">
-              <div class="flex flex-row gap-1 cursor-pointer items-center" @click="likeMemo(item.id)">
+              <div class="flex flex-row gap-1 cursor-pointer items-center px-4" @click="likeMemo(item.id)">
                 <UIcon name="i-carbon-favorite" :class="[liked ? 'text-red-400' : '']"/>
                 <div>赞</div>
               </div>
               <template v-if="sysConfig.enableComment">
                 <span class="bg-[#6b7280] h-[20px] w-[1px]"></span>
-                <div class="flex flex-row gap-1 cursor-pointer items-center" @click="doComment">
-                  <UIcon name="i-carbon-chat"/>
+                <div class="flex flex-row gap-1 cursor-pointer items-center px-4" @click="doComment">
+                  <UIcon name="i-octicon-comment"/>
                   <div>评论</div>
                 </div>
               </template>
-              <template v-if="global.userinfo.id === 1">
-                <span class="bg-[#6b7280] h-[20px] w-[1px]"></span>
-                <div class="flex flex-row gap-1 cursor-pointer items-center" @click="setPinned(item.id)">
-                  <UIcon name="i-carbon-pin"/>
-                  <div class="hidden sm:block">{{ item.pinned ? '取消' : '' }}置顶</div>
-                </div>
-              </template>
-              <template v-if="global&&global.userinfo.id === item.userId">
-                <span class="bg-[#6b7280] h-[20px] w-[1px]"></span>
-                <div class="flex flex-row gap-1 cursor-pointer items-center" @click="go2Edit(item.id)">
-                  <UIcon name="i-carbon-edit"/>
-                  <div class="hidden sm:block">编辑</div>
-                </div>
-              </template>
-              <template v-if="(global.userinfo.id === 1 || global.userinfo.id === item.userId) ">
-                <span class="bg-[#6b7280] h-[20px] w-[1px]"></span>
-                <Confirm @ok="removeMemo(item.id)" @cancel="showToolbar = false">
-                  <div class="flex flex-row gap-1 cursor-pointer items-center">
-                    <UIcon name="i-carbon-trash-can"/>
-                    <div class="hidden sm:block">删除</div>
-                  </div>
-                </Confirm>
-              </template>
             </div>
           </div>
+          <template>
+            <USlideover v-model="moreToolbar" side="bottom" :ui="{ width: 'w-screen max-w-md', height: 'h-screen max-h-20'}">
+              <div class="flex items-center justify-center gap-8 p-4 text-gray-500 dark:text-white">
+                <template v-if="global.userinfo.id === 1">
+                  <div class="flex flex-col gap-1 cursor-pointer items-center" @click="setPinned(item.id)">
+                    <UIcon class="text-[#9fc84a] w-5 h-5" name="i-carbon-pin"/>
+                    <div>{{ item.pinned ? '取消' : '' }}置顶</div>
+                  </div>
+                </template>
+                <template v-if="global&&global.userinfo.id === item.userId">
+                  <div class="flex flex-col gap-1 cursor-pointer items-center" @click="go2Edit(item.id)">
+                    <UIcon class="text-[#9fc84a] w-5 h-5" name="i-carbon-edit"/>
+                    <div>编辑</div>
+                  </div>
+                </template>
+                <template v-if="(global.userinfo.id === 1 || global.userinfo.id === item.userId) ">
+                  <Confirm @ok="removeMemo(item.id)" @cancel="moreToolbar = false">
+                    <div class="flex flex-col gap-1 cursor-pointer items-center">
+                      <UIcon class="text-[#9fc84a] w-5 h-5" name="i-carbon-trash-can"/>
+                      <div>删除</div>
+                    </div>
+                  </Confirm>
+                </template>
+              </div>
+            </USlideover>
+          </template>
         </div>
 
         <div class="rounded bottom-shadow bg-[#f7f7f7] dark:bg-[#202020] flex flex-col gap-1"
@@ -171,6 +177,8 @@ const item = computed(() => {
 
 const global = useGlobalState()
 
+const moreToolbar = ref(false)
+
 const showToolbar = ref(false)
 const toolbarRef = ref(null)
 const liked = ref(false)
@@ -218,16 +226,19 @@ const removeMemo = async (id: number) => {
   } else {
     memoReloadEvent.emit()
   }
-  showToolbar.value = false
+  moreToolbar.value = false
 }
 const setPinned = async (id: number) => {
   await useMyFetch('/memo/setPinned?id=' + id)
   toast.success("操作成功!")
-  showToolbar.value = false
-  memoReloadEvent.emit()
+  if (isDetailPage.value) {
+    await navigateTo('/')
+  } else {
+    memoReloadEvent.emit()
+  }
+  moreToolbar.value = false
 }
 
-
 const doLike = async (id: number, token: string = '') => {
   const likes = JSON.parse(localStorage.getItem('likeMemos') || '[]') as Array<number>
   await useMyFetch(`/memo/like?id=${id}&token=${token}`)
diff --git a/front/components/MobileNav.vue b/front/components/MobileNav.vue
index b86e8f7a..fb98b02a 100644
--- a/front/components/MobileNav.vue
+++ b/front/components/MobileNav.vue
@@ -1,9 +1,16 @@
 <template>
-  <USlideover v-model="open" side="left" class="w-1/3">
-    <div class="flex flex-col gap-4 p-4 text-sm text-gray-500 dark:text-white">
-
-      <div class="flex items-center gap-2">
-        <svg @click="toggleMode" xmlns="http://www.w3.org/2000/svg" width="20" height="20" v-if="mode==='light'"
+  <USlideover v-model="open" side="bottom" :ui="{ width: 'w-screen max-w-md', height: 'h-screen max-h-40'}">
+    <div @click="navigate('/new')" v-if="global.userinfo.token " title="发表" class="flex flex-col items-center p-4 text-gray-500 dark:text-white">
+      <UIcon name="i-carbon-camera" class="text-[#9fc84a] w-7 h-7 cursor-pointer"/>
+      <span>发表</span>
+    </div>
+    <div class="flex items-center justify-between gap-4 p-4 pt-2 text-gray-500 dark:text-white">
+      <div @click="navigate('/')" v-if="$route.path !== '/'" title="主页" class="flex flex-col items-center">
+        <UIcon name="i-carbon-home" class="text-[#9fc84a] w-6 h-6 cursor-pointer"/>
+        <span>主页</span>
+      </div>
+      <div class="flex flex-col items-center gap-1">
+        <svg @click="toggleMode" xmlns="http://www.w3.org/2000/svg" width="22" height="22" v-if="mode==='light'"
              viewBox="0 0 24 24" fill="none"
              stroke="#FDE047"
              stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -13,7 +20,7 @@
           <path d="M22 5h-4"></path>
         </svg>
 
-        <svg @click="toggleMode" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" v-else
+        <svg @click="toggleMode" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" v-else
              fill="none"
              stroke="#FDE047" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-sun-icon cursor-pointer">
@@ -27,31 +34,19 @@
           <path d="m6.34 17.66-1.41 1.41"></path>
           <path d="m19.07 4.93-1.41 1.41"></path>
         </svg>
+        <span @click="toggleMode">{{mode==='light' ? '暗色' : '亮色'}}</span>
       </div>
-      <div @click="navigate('/')" v-if="$route.path !== '/'" title="去首页" class="flex items-center gap-1">
-        <UIcon name="i-carbon-arrow-left" class="text-[#9fc84a] w-5 h-5 cursor-pointer"/>
-        <span>去首页</span>
-      </div>
-      <div @click="navigate('/new')" v-if="global.userinfo.token " title="发言" class="flex gap-1">
-        <UIcon name="i-carbon-edit" class="text-[#9fc84a] w-5 h-5 cursor-pointer"/>
-        <span>发言</span>
-      </div>
-      <div @click="navigate('/user/calendar')" v-if="global.userinfo.token" title="日历" class="flex gap-1">
-        <UIcon name="i-carbon-calendar" class="text-[#9fc84a] w-5 h-5 cursor-pointer"/>
+      <div @click="navigate('/user/calendar')" v-if="global.userinfo.token" title="日历" class="flex flex-col items-center">
+        <UIcon name="i-carbon-calendar" class="text-[#9fc84a] w-6 h-6 cursor-pointer"/>
         <span>日历</span>
       </div>
-
-      <div @click="navigate('/sys/settings')" v-if="global.userinfo.id === 1" title="系统设置" class="flex gap-1">
-        <UIcon name="i-carbon-settings" class="text-[#9fc84a] w-5 h-5 cursor-pointer"/>
-        <span>系统设置</span>
-      </div>
-      <div @click="navigate('/user/settings')" v-if="global.userinfo.token" title="用户设置" class="flex gap-1">
-        <UIcon name="i-carbon-user-profile" class="text-[#9fc84a] w-5 h-5 cursor-pointer"/>
-        <span>用户设置</span>
+      <div @click="navigate('/sys/settings')" v-if="global.userinfo.id === 1" title="系统设置" class="flex flex-col items-center">
+        <UIcon name="i-carbon-settings" class="text-[#9fc84a] w-6 h-6 cursor-pointer"/>
+        <span>系统</span>
       </div>
-      <div @click="navigate('/user/login')" v-if="!global.userinfo.token" title="登录" class="flex gap-1">
-        <UIcon name="i-carbon-login" class="text-[#9fc84a] w-5 h-5 cursor-pointer"/>
-        <span>登录</span>
+      <div @click="navigate('/user/settings')" v-if="global.userinfo.token" title="用户中心" class="flex flex-col items-center">
+        <UIcon name="i-carbon-user-avatar" class="text-[#9fc84a] w-6 h-6 cursor-pointer"/>
+        <span>用户</span>
       </div>
     </div>
   </USlideover>
diff --git a/front/layouts/default.vue b/front/layouts/default.vue
index 4da860ac..6d8575e2 100644
--- a/front/layouts/default.vue
+++ b/front/layouts/default.vue
@@ -12,14 +12,14 @@
 
   <div class="sm:hidden relative">
     <div class="left-0 bottom-10 w-full fixed  flex items-center justify-end"
-         v-if="global.userinfo.token && $route.path === '/'">
+         v-if="global.userinfo.token">
       <div class="flex flex-col items-center gap-2">
         <div v-if="y>300" @click="y=0"
              class="dark:bg-gray-900/85 mr-4 rounded-full bg-slate-50 w-10 h-10 flex items-center justify-center shadow-xl">
           <UIcon name="i-carbon-up-to-top" class="w-6 h-6 text-[#9fc84a] cursor-pointer"></UIcon>
         </div>
-        <NuxtLink to="/new" class="dark:bg-gray-900/85 mr-4 rounded-full bg-slate-50 w-10 h-10 flex items-center justify-center shadow-xl">
-          <UIcon name="i-carbon-edit" class="w-6 h-6 text-[#9fc84a]"></UIcon>
+        <NuxtLink to="/new" v-if="$route.path === '/'" class="dark:bg-gray-900/85 mr-4 rounded-full bg-slate-50 w-10 h-10 flex items-center justify-center shadow-xl">
+          <UIcon name="i-carbon-camera" class="w-6 h-6 text-[#9fc84a]"></UIcon>
         </NuxtLink>
         <div class="dark:bg-gray-900/85 mr-4 rounded-full bg-slate-50 w-10 h-10 flex items-center justify-center shadow-xl" @click="open = true">
           <UIcon name="i-carbon-overflow-menu-horizontal" class="w-6 h-6 text-[#9fc84a] cursor-pointer"></UIcon>

From ac189779d4c0518b88d66eb79591a9f31f9929de Mon Sep 17 00:00:00 2001
From: dinphy <dinphy1205@126.com>
Date: Mon, 26 Aug 2024 17:15:10 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E8=A2=AB=E5=8F=B3=E4=B8=8B=E8=A7=92=E6=B5=AE?=
 =?UTF-8?q?=E5=8A=A8=E5=B7=A5=E5=85=B7=E6=8C=A1=E4=BD=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/layouts/default.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/front/layouts/default.vue b/front/layouts/default.vue
index 6d8575e2..6db33082 100644
--- a/front/layouts/default.vue
+++ b/front/layouts/default.vue
@@ -11,7 +11,7 @@
 
 
   <div class="sm:hidden relative">
-    <div class="left-0 bottom-10 w-full fixed  flex items-center justify-end"
+    <div class="right-0 bottom-10 fixed flex items-center justify-end"
          v-if="global.userinfo.token">
       <div class="flex flex-col items-center gap-2">
         <div v-if="y>300" @click="y=0"
@@ -27,7 +27,7 @@
       </div>
     </div>
 
-    <div class="left-0 bottom-10 w-full fixed  flex items-center justify-end"
+    <div class="right-0 bottom-10 fixed flex items-center justify-end"
          v-if="!global.userinfo.token && $route.path === '/'">
       <div class="flex flex-col items-center gap-2">
         <div v-if="y>300" @click="y=0"

From 029632afd6f8d13d71e597cc6ce46857e108e61a Mon Sep 17 00:00:00 2001
From: dinphy <dinphy1205@126.com>
Date: Tue, 27 Aug 2024 11:49:40 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E4=BF=AE=E5=A4=8DmoreToolBar=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/components/Memo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/components/Memo.vue b/front/components/Memo.vue
index 3609742f..d2f8264a 100644
--- a/front/components/Memo.vue
+++ b/front/components/Memo.vue
@@ -16,7 +16,7 @@
           <div>
             <UIcon v-if="item.pinned" name="i-carbon-pin"/>
             <UIcon v-if="item.showType === 0" name="i-carbon-locked" class="text-red-500 ml-2 dark:text-white"/>
-            <UIcon @click="moreToolbar = true" v-if="global.userinfo.token && $route.path === `/memo/${item.id}`" name="i-carbon-overflow-menu-vertical" class="text-red-500 ml-2 dark:text-white cursor-pointer"/>
+            <UIcon v-if="($route.path === `/memo/${item.id}` && (global.userinfo.id === 1 || global.userinfo.id === item.userId))" name="i-carbon-overflow-menu-vertical" class="text-red-500 ml-2 dark:text-white cursor-pointer" @click="moreToolbar = true" />
           </div>
         </div>
         <div class="mb-2">