v2.5.2a

Author: KanoCifer

.kilo/plans/lively-wandering-rose.md

@@ -0,0 +1,42 @@
+# Plan: Add Dropdown Menu to MobileNav More Button
+
+## Overview
+Replace the static "More" button in `MobileNav.vue` with a shadcn-vue dropdown menu that opens upward, containing profile, login, logout, messages, and analytics items.
+
+## Current State
+- `MobileNav.vue` has a static "More" button that does nothing
+- shadcn-vue `dropdown-menu` components are already installed at `@/components/ui/dropdown-menu/`
+- Required icons exist: `IconUser`, `LoginIcon`, `LogoutIcon`, `MessageIcon`, `IconAnalytics`
+- Routes exist: `/login`, `/messages`, `/analytics`, `/settings` (profile)
+- Auth store has `logout()` function at `@/stores/auth`
+
+## Changes
+
+### File: `frontend/src/components/basic/MobileNav.vue`
+
+1. **Update imports** - Add shadcn-vue dropdown components and icons:
+   - `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuSeparator`, `DropdownMenuTrigger`
+   - `IconUser`, `LoginIcon`, `LogoutIcon`, `MessageIcon`, `IconAnalytics` from `../icons`
+   - `useRouter` from `vue-router` (for programmatic navigation)
+   - `useAuthStore` from `@/stores/auth` (for logout)
+
+2. **Replace "More" button section** (lines 70-80) with:
+   - `DropdownMenu` wrapper
+   - `DropdownMenuTrigger` wrapping the existing icon button
+   - `DropdownMenuContent` with `side="top"` to open upward, `:side-offset="8"` for spacing
+   - Menu items:
+     - **Profile** (`IconUser`) → navigate to `/settings`
+     - **Login** (`LoginIcon`) → navigate to `/login` (only shown when not authenticated)
+     - **Messages** (`MessageIcon`) → navigate to `/messages`
+     - **Analytics** (`IconAnalytics`) → navigate to `/analytics`
+     - **Separator**
+     - **Logout** (`LogoutIcon`) → call `authStore.logout()` (the store already navigates to `/` internally), only shown when authenticated, with `variant="destructive"`
+
+3. **Style dropdown content** to match nav's glassmorphism aesthetic:
+   - Use consistent `dark:` variants
+   - Keep `font-['Inter']` for labels
+   - Match the backdrop-blur and transparency style
+
+## Verification
+- Run `pnpm run type-check` to ensure no TypeScript errors
+- Run `pnpm run lint` to check for lint issues

frontend/components.d.ts

@@ -25,6 +25,7 @@ declare module 'vue' {
     AlertDialogTrigger: typeof import('./src/components/ui/alert-dialog/AlertDialogTrigger.vue')['default']
     AProgress: typeof import('ant-design-vue/es')['Progress']
     AreaChart: typeof import('./src/components/analytics/AreaChart.vue')['default']
+    ArrowLeft: typeof import('./src/components/icons/ArrowLeft.vue')['default']
     ArticleComments: typeof import('./src/components/blog/ArticleComments.vue')['default']
     ArticleDetailLayout: typeof import('./src/components/article/ArticleDetailLayout.vue')['default']
     ArticleSummaryCard: typeof import('./src/components/blog/ArticleSummaryCard.vue')['default']
@@ -78,17 +79,35 @@ declare module 'vue' {
     CommentItem: typeof import('./src/components/blog/CommentItem.vue')['default']
     CommentsTab: typeof import('./src/components/message/CommentsTab.vue')['default']
     DelIcon: typeof import('./src/components/icons/DelIcon.vue')['default']
+    DropdownMenu: typeof import('./src/components/ui/dropdown-menu/DropdownMenu.vue')['default']
+    DropdownMenuCheckboxItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue')['default']
+    DropdownMenuContent: typeof import('./src/components/ui/dropdown-menu/DropdownMenuContent.vue')['default']
+    DropdownMenuGroup: typeof import('./src/components/ui/dropdown-menu/DropdownMenuGroup.vue')['default']
+    DropdownMenuItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuItem.vue')['default']
+    DropdownMenuLabel: typeof import('./src/components/ui/dropdown-menu/DropdownMenuLabel.vue')['default']
+    DropdownMenuRadioGroup: typeof import('./src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue')['default']
+    DropdownMenuRadioItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue')['default']
+    DropdownMenuSeparator: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSeparator.vue')['default']
+    DropdownMenuShortcut: typeof import('./src/components/ui/dropdown-menu/DropdownMenuShortcut.vue')['default']
+    DropdownMenuSub: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSub.vue')['default']
+    DropdownMenuSubContent: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSubContent.vue')['default']
+    DropdownMenuSubTrigger: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue')['default']
+    DropdownMenuTrigger: typeof import('./src/components/ui/dropdown-menu/DropdownMenuTrigger.vue')['default']
     EditIcon: typeof import('./src/components/icons/EditIcon.vue')['default']
     HomeIcon: typeof import('./src/components/icons/HomeIcon.vue')['default']
     HomeSideBar: typeof import('./src/components/layout/HomeSideBar.vue')['default']
     IconAnalytics: typeof import('./src/components/icons/IconAnalytics.vue')['default']
     IconClose: typeof import('./src/components/icons/IconClose.vue')['default']
+    IconCloud: typeof import('./src/components/icons/IconCloud.vue')['default']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
     IconDel: typeof import('./src/components/icons/IconDel.vue')['default']
     IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
     IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
     IconError: typeof import('./src/components/icons/IconError.vue')['default']
+    IconGlobal: typeof import('./src/components/icons/IconGlobal.vue')['default']
     IconInfo: typeof import('./src/components/icons/IconInfo.vue')['default']
+    IconKey: typeof import('./src/components/icons/IconKey.vue')['default']
+    IconLock: typeof import('./src/components/icons/IconLock.vue')['default']
     IconMemo: typeof import('./src/components/icons/IconMemo.vue')['default']
     IconMore: typeof import('./src/components/icons/IconMore.vue')['default']
     IconPopular: typeof import('./src/components/icons/IconPopular.vue')['default']

frontend/src/assets/base.css

@@ -37,6 +37,43 @@ body {
   }
 }
 
+@theme {
+  --animate-scale-easeOutElastic: scale-easeOutElastic 0.5s;
+  @keyframes scale-easeOutElastic {
+    0% {
+      transform: scale(1);
+    }
+
+    16% {
+      transform: scale(-0.32);
+    }
+
+    28% {
+      transform: scale(0.13);
+    }
+
+    44% {
+      transform: scale(-0.05);
+    }
+
+    59% {
+      transform: scale(0.02);
+    }
+
+    73% {
+      transform: scale(-0.01);
+    }
+
+    88% {
+      transform: scale(0);
+    }
+
+    100% {
+      transform: scale(0);
+    }
+  }
+}
+
 @theme {
   --animate-breathe: breathe 1s infinite;
   @keyframes breathe {

frontend/src/assets/squircle.css

@@ -1,6 +1,6 @@
 .squircle {
   /* 回退方案：标准圆角 (对应 tailwind 的 rounded-3xl 或 4xl) */
-  border-radius: 40px;
+  border-radius: 2rem;
 
   /* 超椭圆特性 */
   @supports (corner-shape: squircle) {

frontend/src/components/basic/BasicDetail.vue

@@ -2,7 +2,7 @@
   <div>
     <!-- Title Section with Parallax -->
     <div
-      class="relative -z-5 mx-0 mt-60 flex flex-col items-center justify-center bg-transparent"
+      class="relative -z-5 mx-0 mt-60 flex flex-col items-center justify-center bg-transparent max-sm:mt-30"
       :style="titleStyle"
     >
       <div>

frontend/src/components/basic/BasicNotifier.vue

@@ -24,7 +24,12 @@
             <div
               class="flex h-20 w-20 items-center justify-center rounded-full bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400"
             >
-              <svg class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg
+                class="h-10 w-10"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -44,7 +49,8 @@
 
           <!-- 说明文字 -->
           <p class="mb-8 text-center text-gray-600 dark:text-gray-400">
-            为了获得最佳体验，请使用桌面设备访问本网站。 移动端功能正在开发中，敬请期待！
+            为了获得最佳体验，请使用桌面设备访问本网站。
+            移动端功能正在开发中，敬请期待！
           </p>
 
           <!-- 确认按钮 -->

frontend/src/components/basic/MobileHeader.vue

@@ -5,17 +5,28 @@
     :animate="{ y: 0, opacity: 1 }"
     :exit="{ y: -10, opacity: 0 }"
     :transition="{ type: 'spring', damping: 20, stiffness: 300 }"
-    class="fixed top-0 left-0 z-50 flex w-full items-center justify-between rounded-b-[2rem] bg-white/60 px-6 py-4 shadow-[0_20px_40px_rgba(21,28,39,0.06)] backdrop-blur-xl dark:bg-slate-900/60 dark:shadow-[0_20px_40px_rgba(0,0,0,0.2)]"
+    class="fixed top-0 left-0 z-50 flex w-full items-center justify-between rounded-b-[2rem] border-b border-b-white bg-white/60 px-6 py-4 shadow-[0_20px_40px_rgba(21,28,39,0.06)] backdrop-blur-xl dark:border-b-gray-700 dark:bg-slate-900/60 dark:shadow-[0_20px_40px_rgba(0,0,0,0.2)]"
   >
     <div class="flex items-center gap-3">
       <div class="h-10 w-10 overflow-hidden rounded-full border-2 border-blue-600/20">
-        <img src="/images/about.webp" alt="Avatar" class="h-full w-full object-cover" />
+        <img
+          :src="user?.photo || '/images/about.webp'"
+          alt="Avatar"
+          class="h-full w-full object-cover"
+        />
       </div>
       <h1
-        class="font-['Plus_Jakarta_Sans'] text-lg font-bold tracking-tight text-blue-700 dark:text-blue-400"
+        v-if="$route.path === '/'"
+        class="font-serif font-bold tracking-tight text-blue-700 italic dark:text-blue-400"
       >
-        Dashboard
+        {{ user?.username ? `Welcome, ${user.username}!` : "Welcome!" }}
       </h1>
+      <ArrowLeft
+        v-else
+        @click.stop="$router.back()"
+        class="size-6 cursor-pointer text-blue-500 dark:text-blue-400"
+        title="返回上一页"
+      />
     </div>
     <div class="flex items-center gap-2">
       <ThemeToggle class="scale-90" />
@@ -44,6 +55,12 @@
 
 <script setup lang="ts">
 import { motion } from "motion-v";
+import { storeToRefs } from "pinia";
+import { useAuthStore } from "@/stores/auth";
+import ArrowLeft from "../icons/ArrowLeft.vue";
+
+const authStore = useAuthStore();
+const { user } = storeToRefs(authStore);
 </script>
 
 <style scoped></style>