release: v1.0.2

Add i18n (zh-CN/en), mobile navigation menus, stats and upload UI
improvements, and Docker reset-password CLI for emergency recovery.

app/components/AppShell.vue

@@ -4,59 +4,27 @@ import logoLight from '~/assets/image/logo-light.png'
 import logoDark from '~/assets/image/logo-dark.png'
 
 const route = useRoute()
-const colorMode = useColorMode()
 const { logout, user, isAdmin } = useAuth()
+const { t } = useI18n()
+
+const mobileNavOpen = ref(false)
+const mobileUserOpen = ref(false)
 
 const navItems = computed(() => {
   const items = [
-    { label: 'API', to: '/api', icon: 'i-lucide-code-2' },
-    { label: '统计', to: '/stats', icon: 'i-lucide-chart-column' }
+    { label: t('nav.api'), to: '/api', icon: 'i-lucide-code-2' },
+    { label: t('nav.stats'), to: '/stats', icon: 'i-lucide-chart-column' }
   ]
   if (isAdmin.value) {
-    items.push({ label: '设置', to: '/settings', icon: 'i-lucide-settings' })
+    items.push({ label: t('nav.settings'), to: '/settings', icon: 'i-lucide-settings' })
   }
   return items
 })
 
-const themeIcon = computed(() => {
-  if (colorMode.preference === 'system') return 'i-lucide-monitor'
-  return colorMode.preference === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'
-})
-
-const themeItems = computed<DropdownMenuItem[][]>(() => [[
-  {
-    label: '浅色',
-    icon: 'i-lucide-sun',
-    type: 'checkbox',
-    checked: colorMode.preference === 'light',
-    onUpdateChecked(checked: boolean) {
-      if (checked) colorMode.preference = 'light'
-    }
-  },
-  {
-    label: '深色',
-    icon: 'i-lucide-moon',
-    type: 'checkbox',
-    checked: colorMode.preference === 'dark',
-    onUpdateChecked(checked: boolean) {
-      if (checked) colorMode.preference = 'dark'
-    }
-  },
-  {
-    label: '跟随系统',
-    icon: 'i-lucide-monitor',
-    type: 'checkbox',
-    checked: colorMode.preference === 'system',
-    onUpdateChecked(checked: boolean) {
-      if (checked) colorMode.preference = 'system'
-    }
-  }
-]])
-
-const userMenuItems = computed<DropdownMenuItem[][]>(() => {
+const accountMenuItems = computed<DropdownMenuItem[]>(() => {
   const items: DropdownMenuItem[] = [
     {
-      label: '修改密码',
+      label: t('nav.changePassword'),
       icon: 'i-lucide-key-round',
       to: '/account/password'
     }
@@ -64,27 +32,39 @@ const userMenuItems = computed<DropdownMenuItem[][]>(() => {
 
   if (isAdmin.value) {
     items.push({
-      label: '系统设置',
+      label: t('nav.systemSettings'),
       icon: 'i-lucide-settings',
       to: '/settings'
     })
   }
 
   items.push({
-    label: '退出登录',
+    label: t('nav.logout'),
     icon: 'i-lucide-log-out',
     onSelect() {
       void handleLogout()
     }
   })
 
-  return [items]
+  return items
 })
 
+const desktopUserMenuItems = computed<DropdownMenuItem[][]>(() => [
+  accountMenuItems.value
+])
+
 function isNavActive(to: string) {
   return route.path.startsWith(to)
 }
 
+watch(mobileNavOpen, (open) => {
+  if (open) mobileUserOpen.value = false
+})
+
+watch(mobileUserOpen, (open) => {
+  if (open) mobileNavOpen.value = false
+})
+
 async function handleLogout() {
   await logout()
 }
@@ -93,83 +73,94 @@ async function handleLogout() {
 <template>
   <div class="flex min-h-screen flex-col">
     <header class="sticky top-0 z-40 border-b border-default bg-default/80 backdrop-blur">
-      <div class="mx-auto flex max-w-7xl flex-col gap-3 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between sm:px-6">
-        <NuxtLink
-          to="/"
-          title="返回上传"
-          class="group flex shrink-0 items-center gap-2.5 transition-opacity hover:opacity-90 sm:gap-3"
-        >
-          <img
-            :src="logoLight"
-            alt="PicHost"
-            class="h-10 w-auto shrink-0 object-contain sm:h-11 dark:hidden"
-            decoding="async"
-            draggable="false"
+      <div class="mx-auto max-w-7xl px-4 py-2.5 sm:px-6">
+        <div class="flex items-center justify-between gap-3">
+          <NuxtLink
+            to="/"
+            :title="t('nav.backToUpload')"
+            class="group flex min-w-0 shrink items-center gap-2.5 transition-opacity hover:opacity-90 sm:gap-3"
           >
-          <img
-            :src="logoDark"
-            alt="PicHost"
-            class="hidden h-10 w-auto shrink-0 object-contain sm:h-11 dark:block"
-            decoding="async"
-            draggable="false"
-          >
-          <div class="min-w-0 leading-tight">
-            <p class="text-[15px] font-bold tracking-tight sm:text-base">
-              <span class="text-highlighted">Pic</span><span class="text-primary">Host</span>
-            </p>
-            <p class="mt-0.5 text-[11px] text-muted sm:text-xs">
-              个人轻量图床
-            </p>
-          </div>
-        </NuxtLink>
-
-        <div class="flex flex-wrap items-center justify-end gap-1 sm:gap-2">
-          <nav class="flex flex-wrap items-center gap-1">
-            <UButton
-              v-for="item in navItems"
-              :key="item.to"
-              :to="item.to"
-              size="sm"
-              :variant="isNavActive(item.to) ? 'soft' : 'ghost'"
-              :color="isNavActive(item.to) ? 'primary' : 'neutral'"
-              :icon="item.icon"
-              :label="item.label"
-            />
-          </nav>
-
-          <div class="mx-1 hidden h-5 w-px bg-muted sm:block" />
+            <img
+              :src="logoLight"
+              alt="PicHost"
+              class="h-9 w-auto shrink-0 object-contain sm:h-11 dark:hidden"
+              decoding="async"
+              draggable="false"
+            >
+            <img
+              :src="logoDark"
+              alt="PicHost"
+              class="hidden h-9 w-auto shrink-0 object-contain sm:h-11 dark:block"
+              decoding="async"
+              draggable="false"
+            >
+            <div class="min-w-0 leading-tight">
+              <p class="text-[15px] font-bold tracking-tight sm:text-base">
+                <span class="text-highlighted">Pic</span><span class="text-primary">Host</span>
+              </p>
+              <p class="mt-0.5 hidden text-[11px] text-muted min-[380px]:block sm:text-xs">
+                {{ t('app.tagline') }}
+              </p>
+            </div>
+          </NuxtLink>
 
           <ClientOnly>
-            <UDropdownMenu
-              v-if="user"
-              :items="userMenuItems"
-            >
-              <UButton
-                variant="ghost"
-                color="neutral"
-                size="sm"
-                class="max-w-[10rem] gap-1.5"
-              >
-                <UIcon
-                  name="i-lucide-user"
-                  class="size-4 shrink-0"
+            <div class="flex shrink-0 items-center gap-0.5 sm:gap-1">
+              <nav class="hidden items-center gap-1 sm:flex">
+                <UButton
+                  v-for="item in navItems"
+                  :key="item.to"
+                  :to="item.to"
+                  size="sm"
+                  :variant="isNavActive(item.to) ? 'soft' : 'ghost'"
+                  :color="isNavActive(item.to) ? 'primary' : 'neutral'"
+                  :icon="item.icon"
+                  :label="item.label"
                 />
-                <span class="truncate">{{ user.username }}</span>
-                <UIcon
-                  name="i-lucide-chevron-down"
-                  class="size-3.5 shrink-0 opacity-60"
+              </nav>
+
+              <div class="mx-1 hidden h-5 w-px bg-muted sm:block" />
+
+              <div class="hidden items-center gap-0.5 sm:flex">
+                <LocaleMenu />
+                <ThemeMenu />
+              </div>
+
+              <div class="flex items-center gap-0.5 sm:hidden">
+                <MobileUserMenu
+                  v-if="user"
+                  v-model:open="mobileUserOpen"
                 />
-              </UButton>
-            </UDropdownMenu>
-            <UDropdownMenu :items="themeItems">
-              <UButton
-                :icon="themeIcon"
-                variant="ghost"
-                color="neutral"
-                size="sm"
-                aria-label="切换主题"
-              />
-            </UDropdownMenu>
+                <MobileNavMenu
+                  v-model:open="mobileNavOpen"
+                  :items="navItems"
+                />
+              </div>
+
+              <div class="hidden sm:block">
+                <UDropdownMenu
+                  v-if="user"
+                  :items="desktopUserMenuItems"
+                >
+                  <UButton
+                    variant="ghost"
+                    color="neutral"
+                    size="sm"
+                    class="max-w-[10rem] gap-1.5"
+                  >
+                    <UIcon
+                      name="i-lucide-user"
+                      class="size-4 shrink-0"
+                    />
+                    <span class="truncate">{{ user.username }}</span>
+                    <UIcon
+                      name="i-lucide-chevron-down"
+                      class="size-3.5 shrink-0 opacity-60"
+                    />
+                  </UButton>
+                </UDropdownMenu>
+              </div>
+            </div>
             <template #fallback>
               <div class="size-8" />
             </template>