Merge pull request #186 from dinphy/king

优化移动端UI

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"

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 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">
           <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}`)

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>

front/layouts/default.vue

@@ -11,23 +11,23 @@
 
 
   <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 === '/'">
+    <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"
              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>
         </div>
       </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"