refactor(chat-ui): 抽离侧边栏并统一账号/实时/隐私状态

新增 SidebarRail 组件并统一主导航入口

引入 chatAccounts/chatRealtime/privacy 三个 Pinia store 复用全局状态

聊天/联系人/朋友圈页面去重侧栏逻辑，app 根布局统一承载标题栏与内容区

frontend/app.vue

@@ -1,13 +1,22 @@
 <template>
   <div :class="rootClass">
-    <DesktopTitleBar v-if="isDesktop && !isChatRoute" />
-    <div :class="contentClass">
-      <NuxtPage />
+    <SidebarRail v-if="showSidebar" />
+    <div class="flex-1 flex flex-col min-h-0">
+      <!-- Desktop titlebar lives above the page content (right column) -->
+      <DesktopTitleBar />
+      <div :class="contentClass">
+        <NuxtPage />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { useChatAccountsStore } from '~/stores/chatAccounts'
+import { usePrivacyStore } from '~/stores/privacy'
+
+const route = useRoute()
+
 // In Electron the server/pre-render doesn't know about `window.wechatDesktop`.
 // If we render different DOM on server vs client, Vue hydration will keep the
 // server HTML (no patch) and the layout/CSS fixes won't apply reliably.
@@ -23,25 +32,32 @@ onMounted(() => {
   isDesktop.value = !!window?.wechatDesktop
   updateDprVar()
   window.addEventListener('resize', updateDprVar)
+
+  // Init global UI state.
+  const chatAccounts = useChatAccountsStore()
+  const privacy = usePrivacyStore()
+  void chatAccounts.ensureLoaded()
+  privacy.init()
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('resize', updateDprVar)
 })
 
-const route = useRoute()
-const isChatRoute = computed(() => route.path?.startsWith('/chat') || route.path?.startsWith('/sns') || route.path?.startsWith('/contacts'))
-
 const rootClass = computed(() => {
   const base = 'bg-gradient-to-br from-green-50 via-emerald-50 to-green-100'
   return isDesktop.value
-    ? `wechat-desktop h-screen flex flex-col overflow-hidden ${base}`
-    : `min-h-screen ${base}`
+    ? `wechat-desktop h-screen flex overflow-hidden ${base}`
+    : `h-screen flex overflow-hidden ${base}`
 })
 
 const contentClass = computed(() =>
-  isDesktop.value ? 'wechat-desktop-content flex-1 overflow-auto min-h-0' : ''
+  isDesktop.value
+    ? 'wechat-desktop-content flex-1 overflow-auto min-h-0'
+    : 'flex-1 overflow-auto min-h-0'
 )
+
+const showSidebar = computed(() => !String(route.path || '').startsWith('/wrapped'))
 </script>
 
 <style>
@@ -70,15 +86,4 @@ const contentClass = computed(() =>
 .wechat-desktop .wechat-desktop-content > .min-h-screen {
   min-height: 100%;
 }
-
-/* 页面过渡动画 - 渐显渐隐效果 */
-.page-enter-active,
-.page-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.page-enter-from,
-.page-leave-to {
-  opacity: 0;
-}
 </style>