refactor(ui): reorganize media cleanup section and update labels

app/composables/usePublicHomeLayout.ts

@@ -2,10 +2,6 @@ import type { InjectionKey, Ref } from 'vue'
 
 export type PublicHomeLayoutMode = 'showcase' | 'detailed'
 
-export function publicHomeLayoutStorageKey(slug: string) {
-  return `public-home-layout:${slug}`
-}
-
 /** 由 `layouts/public.vue` provide，公开主页 `inject` 读取 */
 export const publicHomeLayoutModeKey: InjectionKey<Ref<PublicHomeLayoutMode>> = Symbol('publicHomeLayoutMode')
 

app/layouts/public.vue

@@ -2,7 +2,6 @@
 import { useAuthSession } from '../composables/useAuthSession'
 import {
   publicHomeLayoutModeKey,
-  publicHomeLayoutStorageKey,
   type PublicHomeLayoutMode,
 } from '../composables/usePublicHomeLayout'
 import { unwrapApiBody, type ApiResponse } from '../utils/http/factory'
@@ -50,35 +49,41 @@ const headerBrandIconUrl = computed(() =>
   profileSlug.value ? publicHomeHeader.value?.iconUrl ?? null : null,
 )
 
+type LayoutBySlug = Record<string, PublicHomeLayoutMode>
+
+const layoutBySlug = useCookie<LayoutBySlug>('public_home_layout', {
+  default: () => ({}),
+  maxAge: 60 * 60 * 24 * 400,
+  sameSite: 'lax',
+})
+
+function cookieModeForSlug(slug: string): PublicHomeLayoutMode {
+  const m = layoutBySlug.value[slug]
+  return m === 'detailed' || m === 'showcase' ? m : 'showcase'
+}
+
 const publicLayoutMode = ref<PublicHomeLayoutMode>('showcase')
 provide(publicHomeLayoutModeKey, publicLayoutMode)
 
-function syncModeFromStorage() {
-  if (!import.meta.client) {
-    return
-  }
+function syncModeFromCookie() {
   if (!showPublicLayoutToggle.value || !profileSlug.value) {
     return
   }
-  const raw = localStorage.getItem(publicHomeLayoutStorageKey(profileSlug.value))
-  publicLayoutMode.value = raw === 'detailed' || raw === 'showcase' ? raw : 'showcase'
+  publicLayoutMode.value = cookieModeForSlug(profileSlug.value)
 }
 
-onMounted(() => {
-  refresh().catch(() => {})
-  syncModeFromStorage()
-})
-
-watch([profileSlug, showPublicLayoutToggle], syncModeFromStorage)
+syncModeFromCookie()
+watch([profileSlug, showPublicLayoutToggle, layoutBySlug], syncModeFromCookie)
 
 watch(publicLayoutMode, (m) => {
-  if (!import.meta.client) {
-    return
-  }
   if (!showPublicLayoutToggle.value || !profileSlug.value) {
     return
   }
-  localStorage.setItem(publicHomeLayoutStorageKey(profileSlug.value), m)
+  layoutBySlug.value = { ...layoutBySlug.value, [profileSlug.value]: m }
+})
+
+onMounted(() => {
+  refresh().catch(() => {})
 })
 </script>
 

app/pages/me/index.vue

@@ -69,17 +69,6 @@ onMounted(async () => {
       </UCard>
       <UCard>
         <div class="font-medium">
-          文章媒体清理
-        </div>
-        <p class="text-sm text-muted mt-1">
-          孤儿图片审查与清理
-        </p>
-        <UButton to="/me/media/orphans" class="mt-3" size="sm">
-          打开
-        </UButton>
-      </UCard>
-      <UCard>
-        <div class="font-medium">
           时光机
         </div>
         <UButton to="/me/timeline" class="mt-3" size="sm">
@@ -113,9 +102,20 @@ onMounted(async () => {
           打开
         </UButton>
       </UCard>
+      <UCard>
+        <div class="font-medium">
+          文章媒体清理
+        </div>
+        <p class="text-sm text-muted mt-1">
+          孤儿图片审查与清理
+        </p>
+        <UButton to="/me/media/orphans" class="mt-3" size="sm">
+          打开
+        </UButton>
+      </UCard>
       <UCard v-if="user?.role === 'admin'">
         <div class="font-medium">
-          媒体存储校验
+          文章媒体存储校验
         </div>
         <p class="text-sm text-muted mt-1">
           磁盘与 media_assets 一致性