feat(account): add forum login and sidebar account entry

src/components/AccountQuickMenu.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="absolute left-0 right-0 top-full z-20 mt-2 rounded-2xl border border-slate-200 bg-white p-2 shadow-xl dark:border-slate-700 dark:bg-slate-900"
+  >
+    <button
+      type="button"
+      class="quick-menu-item"
+      @click="emit('open-user-management')"
+    >
+      <i class="fas fa-user-cog"></i>
+      <span>用户管理</span>
+    </button>
+    <button
+      type="button"
+      class="quick-menu-item"
+      @click="emit('open-favorites')"
+    >
+      <i class="fas fa-heart"></i>
+      <span>我的收藏</span>
+    </button>
+    <button type="button" class="quick-menu-item" @click="emit('open-forum')">
+      <i class="fas fa-comments"></i>
+      <span>论坛首页</span>
+    </button>
+    <button type="button" class="quick-menu-item" @click="emit('edit-profile')">
+      <i class="fas fa-id-card"></i>
+      <span>修改论坛资料</span>
+    </button>
+    <button
+      type="button"
+      class="quick-menu-item text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+      @click="emit('logout')"
+    >
+      <i class="fas fa-sign-out-alt"></i>
+      <span>退出登录</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits<{
+  "open-user-management": [];
+  "open-favorites": [];
+  "open-forum": [];
+  "edit-profile": [];
+  logout: [];
+}>();
+</script>
+
+<style scoped>
+.quick-menu-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.75rem;
+  border-radius: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  text-align: left;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #475569;
+  transition: all 0.15s ease;
+}
+
+.quick-menu-item:hover {
+  background: rgba(0, 113, 227, 0.06);
+  color: #0071e3;
+}
+
+.dark .quick-menu-item {
+  color: #cbd5e1;
+}
+
+.dark .quick-menu-item:hover {
+  background: rgba(64, 156, 255, 0.1);
+  color: #409cff;
+}
+</style>

src/components/AppSidebar.vue

@@ -1,21 +1,44 @@
 <template>
   <div class="flex h-full flex-col gap-6">
-    <div class="flex items-center justify-between gap-3">
-      <div class="flex items-center gap-3">
-        <img
-          :src="amberLogo"
-          alt="Amber PM"
-          class="h-11 w-11 rounded-2xl bg-white/70 p-2 shadow-sm ring-1 ring-slate-900/5 dark:bg-slate-800"
+    <div class="flex items-start justify-between gap-3">
+      <div class="relative min-w-0 flex-1">
+        <button
+          type="button"
+          class="flex w-full min-w-0 items-center gap-3 rounded-2xl p-1 text-left transition hover:bg-slate-100 dark:hover:bg-slate-800"
+          :aria-label="accountLabel"
+          @click="handleAccountClick"
+        >
+          <img
+            v-if="!currentUser || !currentUser.avatarUrl"
+            :src="amberLogo"
+            alt="Amber PM"
+            class="h-11 w-11 rounded-2xl bg-white/70 p-2 shadow-sm ring-1 ring-slate-900/5 dark:bg-slate-800"
+          />
+          <img
+            v-else
+            :src="currentUser.avatarUrl"
+            :alt="accountLabel"
+            class="h-11 w-11 rounded-2xl object-cover shadow-sm ring-1 ring-slate-900/5"
+          />
+          <div class="flex flex-col">
+            <span
+              class="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+              >{{ currentUser ? currentUser.forumLevel : "Spark Store" }}</span
+            >
+            <span
+              class="text-lg font-semibold text-slate-900 dark:text-white"
+              >{{ accountLabel }}</span
+            >
+          </div>
+        </button>
+        <AccountQuickMenu
+          v-if="currentUser && showAccountMenu"
+          @open-user-management="emit('open-user-management')"
+          @open-favorites="emit('open-favorites')"
+          @open-forum="emit('open-forum')"
+          @edit-profile="emit('edit-profile')"
+          @logout="emit('logout')"
         />
-        <div class="flex flex-col">
-          <span
-            class="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
-            >Spark Store</span
-          >
-          <span class="text-lg font-semibold text-slate-900 dark:text-white"
-            >星火应用商店</span
-          >
-        </div>
       </div>
       <div class="flex items-center gap-1">
         <ThemeToggle :theme-mode="themeMode" @toggle="toggleTheme" />
@@ -105,10 +128,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
+import AccountQuickMenu from "./AccountQuickMenu.vue";
 import ThemeToggle from "./ThemeToggle.vue";
 import amberLogo from "../assets/imgs/spark-store.svg";
-import type { SidebarEntry } from "../global/typedefinition";
+import type { SidebarEntry, SparkUser } from "../global/typedefinition";
 
 const props = defineProps<{
   activeTab: string;
@@ -119,6 +143,7 @@ const props = defineProps<{
   storeFilter: "spark" | "apm" | "both";
   sidebarEntries: SidebarEntry[];
   entryCounts: Record<string, number>;
+  currentUser: SparkUser | null;
 }>();
 
 const emit = defineEmits<{
@@ -127,8 +152,31 @@ const emit = defineEmits<{
   (e: "close"): void;
   (e: "list"): void;
   (e: "update"): void;
+  (e: "request-login"): void;
+  (e: "open-user-management"): void;
+  (e: "open-favorites"): void;
+  (e: "open-forum"): void;
+  (e: "edit-profile"): void;
+  (e: "logout"): void;
 }>();
 
+const showAccountMenu = ref(false);
+
+const accountLabel = computed(() => {
+  return props.currentUser
+    ? props.currentUser.displayName || props.currentUser.username
+    : "登录 / 注册";
+});
+
+const handleAccountClick = () => {
+  if (!props.currentUser) {
+    emit("request-login");
+    return;
+  }
+
+  showAccountMenu.value = !showAccountMenu.value;
+};
+
 const toggleTheme = () => {
   emit("toggle-theme");
 };

src/components/LoginModal.vue

@@ -0,0 +1,120 @@
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="show"
+        class="fixed inset-0 z-[90] flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
+        @click.self="emit('close')"
+      >
+        <form
+          class="w-full max-w-md rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl dark:border-slate-700 dark:bg-slate-900"
+          @submit.prevent="submitLogin"
+        >
+          <div class="mb-6">
+            <h2 class="text-2xl font-bold text-slate-900 dark:text-white">
+              登录星火账号
+            </h2>
+            <p
+              class="mt-2 text-sm leading-6 text-slate-500 dark:text-slate-400"
+            >
+              使用论坛账号登录。密码仅直接提交到星火论坛用于换取论坛令牌，不会发送给商店后端。
+            </p>
+          </div>
+
+          <label class="mb-4 block">
+            <span
+              class="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-200"
+            >
+              论坛账号
+            </span>
+            <input
+              v-model="identification"
+              type="text"
+              autocomplete="username"
+              class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-slate-900 outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/20 dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+            />
+          </label>
+
+          <label class="mb-4 block">
+            <span
+              class="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-200"
+            >
+              论坛密码
+            </span>
+            <input
+              v-model="password"
+              type="password"
+              autocomplete="current-password"
+              class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-slate-900 outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/20 dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+            />
+          </label>
+
+          <p v-if="error" class="mb-4 text-sm text-red-600 dark:text-red-400">
+            {{ error }}
+          </p>
+
+          <div class="flex items-center justify-between gap-3">
+            <button
+              type="button"
+              class="rounded-xl px-4 py-2 text-sm font-medium text-slate-500 transition hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
+              @click="emit('register')"
+            >
+              注册账号
+            </button>
+            <div class="flex items-center gap-3">
+              <button
+                type="button"
+                class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+                @click="emit('close')"
+              >
+                取消
+              </button>
+              <button
+                type="submit"
+                class="rounded-xl bg-brand px-5 py-2 text-sm font-semibold text-white transition hover:bg-brand/90 disabled:cursor-not-allowed disabled:opacity-60"
+                :disabled="loading"
+              >
+                {{ loading ? "登录中..." : "登录" }}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import type { FlarumLoginPayload } from "@/global/typedefinition";
+
+defineProps<{
+  show: boolean;
+  loading: boolean;
+  error: string;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  login: [payload: FlarumLoginPayload];
+  register: [];
+}>();
+
+const identification = ref("");
+const password = ref("");
+
+const submitLogin = () => {
+  emit("login", {
+    identification: identification.value.trim(),
+    password: password.value,
+  });
+};
+</script>

src/components/LoginPromptModal.vue

@@ -0,0 +1,58 @@
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="show"
+        class="fixed inset-0 z-[85] flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
+        @click.self="emit('close')"
+      >
+        <div
+          class="w-full max-w-sm rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl dark:border-slate-700 dark:bg-slate-900"
+        >
+          <h2 class="text-xl font-bold text-slate-900 dark:text-white">
+            需要登录
+          </h2>
+          <p class="mt-3 text-sm leading-6 text-slate-500 dark:text-slate-400">
+            {{ message }}
+          </p>
+          <div class="mt-6 flex items-center justify-end gap-3">
+            <button
+              type="button"
+              class="rounded-xl px-4 py-2 text-sm font-medium text-slate-500 transition hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
+              @click="emit('register')"
+            >
+              注册账号
+            </button>
+            <button
+              type="button"
+              class="rounded-xl bg-brand px-5 py-2 text-sm font-semibold text-white transition hover:bg-brand/90"
+              @click="emit('login')"
+            >
+              登录
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  show: boolean;
+  message: string;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  login: [];
+  register: [];
+}>();
+</script>